type TabsProps<T extends string> = {
  value: T;
  onChange: (v: T) => void;
  tabs: { id: T; label: string }[];
  className?: string;
};

function Tabs<T extends string>({ value, onChange, tabs, className = '' }: TabsProps<T>) {
  return (
    <div
      className={`relative flex gap-1 p-1 rounded-xl bg-[var(--tg-bg-secondary)] ${className}`}
    >
      {tabs.map((t) => {
        const active = t.id === value;
        return (
          <button
            key={t.id}
            type="button"
            onClick={() => onChange(t.id)}
            className={`flex-1 h-8 rounded-lg text-[14px] font-medium tg-press
              transition-colors duration-150
              ${
                active
                  ? 'bg-[var(--tg-bg)] text-[var(--tg-text-primary)] shadow-sm'
                  : 'text-[var(--tg-text-secondary)]'
              }`}
          >
            {t.label}
          </button>
        );
      })}
    </div>
  );
}

export default Tabs;
