interface TabsProps<T extends string> {
  tabs: readonly T[];
  active: T;
  onChange: (tab: T) => void;
}

/** Glass pill tab bar. */
export function Tabs<T extends string>({ tabs, active, onChange }: TabsProps<T>) {
  return (
    <div className="glass-sm flex w-fit gap-1 p-1" role="tablist">
      {tabs.map((tab) => (
        <button
          key={tab}
          role="tab"
          aria-selected={active === tab}
          onClick={() => onChange(tab)}
          className={`rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 ${
            active === tab
              ? 'bg-white/[0.1] text-white shadow-lg shadow-blue-500/10'
              : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
          }`}
        >
          {tab}
        </button>
      ))}
    </div>
  );
}
