import type { LucideIcon } from 'lucide-react';

interface TabButtonProps {
  icon: LucideIcon;
  label: string;
  isActive: boolean;
  onClick: () => void;
}

export function TabButton({
  icon: Icon,
  label,
  isActive,
  onClick,
}: TabButtonProps) {
  return (
    <button
      className={`flex items-center gap-1.5 text-xs sm:text-xs px-4 sm:px-3 py-2 sm:py-1 h-8 sm:h-6 rounded-sm transition-colors whitespace-nowrap min-w-0 ${
        isActive ? 'bg-white/10' : 'hover:bg-white/5'
      }`}
      onClick={onClick}
      type="button"
    >
      <Icon className="h-4 w-4 sm:h-3 sm:w-3" />
      {label}
    </button>
  );
}