interface Tab {
  value: string;
  label: string;
}

interface Props {
  tabs: Tab[];
  value: string;
  onChange: (value: string) => void;
  danger?: string;
}

export function TabBar({ tabs, value, onChange, danger }: Props) {
  return (
    <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
      {tabs.map(tab => {
        const isActive = tab.value === value;
        const isDanger = danger && tab.value === danger;
        return (
          <button
            key={tab.value}
            onClick={() => onChange(tab.value)}
            className={`px-4 py-2 rounded-xl whitespace-nowrap flex-shrink-0 text-sm font-medium transition-colors ${
              isActive
                ? isDanger
                  ? "bg-red-500 text-white"
                  : "bg-rose-400 text-white"
                : "bg-white dark:bg-gray-800 dark:text-white"
            }`}
          >
            {tab.label}
          </button>
        );
      })}
    </div>
  );
}