'use client';

import { cn } from '@/lib/cn';

export function Tabs<T extends string>({
  tabs,
  value,
  onChange,
}: {
  tabs: { id: T; label: string }[];
  value: T;
  onChange: (id: T) => void;
}) {
  return (
    <div className="flex gap-1 border-b border-line mb-[18px] mt-3.5">
      {tabs.map((t) => (
        <button
          key={t.id}
          type="button"
          onClick={() => onChange(t.id)}
          className={cn(
            'border-0 bg-transparent px-3.5 py-2 text-sm cursor-pointer border-b-2 -mb-px',
            value === t.id
              ? 'text-text border-accent font-semibold'
              : 'text-muted border-transparent',
          )}
        >
          {t.label}
        </button>
      ))}
    </div>
  );
}