interface TabProps {
  label: string;
  isActive: boolean;
  onClick: () => void;
}

export default function Tab({ label, isActive, onClick }: TabProps) {
  return (
    <button
      onClick={onClick}
      className={`
        relative
        px-2 py-2
        text-sm font-medium
        transition-all duration-200
        cursor-pointer
        ${isActive ? "text-teal-600" : "text-gray-500 hover:text-gray-800"}
      `}
    >
      {label}
      {isActive && (
        <span className="absolute left-0 -bottom-[1px] w-full h-[2px] bg-teal-600 rounded-full"></span>
      )}
    </button>
  );
}