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

export function Tabs<T extends string>({
  value,
  onChange,
  items,
  className,
}: {
  value: T;
  onChange: (v: T) => void;
  items: { value: T; label: string }[];
  className?: string;
}) {
  return (
    <div className={cn('inline-flex p-1 bg-ink-100 rounded-lg', className)}>
      {items.map((it) => (
        <button
          key={it.value}
          onClick={() => onChange(it.value)}
          className={cn(
            'px-3 h-7 text-xs font-medium rounded-md transition-colors',
            value === it.value ? 'bg-white text-ink-900 shadow-soft' : 'text-ink-600 hover:text-ink-900',
          )}
        >
          {it.label}
        </button>
      ))}
    </div>
  );
}
