"use client";

export type QuoteProviderId = "mothership" | "priority1";

interface QuoteProviderSwitchProps {
  value: QuoteProviderId;
  onChange: (value: QuoteProviderId) => void;
  disabled?: boolean;
}

/** 卡派查价 — Mothership / Priority1 数据源切换 */
export function QuoteProviderSwitch({
  value,
  onChange,
  disabled,
}: QuoteProviderSwitchProps) {
  const tabs: Array<{ id: QuoteProviderId; label: string; desc: string }> = [
    { id: "mothership", label: "MotherShip", desc: "四档实时报价" },
    { id: "priority1", label: "Priority1", desc: "官网模拟填表" },
  ];

  return (
    <div className="mb-6 flex gap-1 rounded-md bg-bg p-1">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          type="button"
          disabled={disabled}
          onClick={() => onChange(tab.id)}
          className={`flex flex-1 flex-col items-center rounded-sm px-3 py-2 text-center transition-colors sm:flex-row sm:justify-center sm:gap-2 ${
            value === tab.id
              ? "bg-surface text-primary shadow-card"
              : "text-text-secondary hover:text-text-primary"
          } ${disabled ? "cursor-not-allowed opacity-50" : ""}`}
        >
          <span className="text-sm font-semibold">{tab.label}</span>
          <span className="text-xs text-text-secondary">{tab.desc}</span>
        </button>
      ))}
    </div>
  );
}