"use client";

import { useTranslation } from "react-i18next";

import { cn } from "@/lib/utils";

export type PlayChip = {
  play_code: string;
  label: string;
};

type HallPlaySwitcherProps = {
  plays: PlayChip[];
  value: string;
  onChange: (playCode: string) => void;
  disabled?: boolean;
};

/**
 * 玩法切换区：横向滚动 chips（产品文档：表格化下注前先选玩法列）。
 */
export function HallPlaySwitcher({
  plays,
  value,
  onChange,
  disabled,
}: HallPlaySwitcherProps) {
  const { t } = useTranslation("player");

  if (plays.length === 0) {
    return (
      <p className="text-sm text-muted-foreground">{t("hall.playSwitcher.empty")}</p>
    );
  }

  return (
    <div className="space-y-2">
      <p className="text-xs font-medium text-muted-foreground">{t("hall.playSwitcher.label")}</p>
      <div className="-mx-1 flex gap-1.5 overflow-x-auto pb-1">
        {plays.map((p) => {
          const active = p.play_code === value;
          return (
            <button
              key={p.play_code}
              type="button"
              disabled={disabled}
              onClick={() => onChange(p.play_code)}
              className={cn(
                "shrink-0 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors",
                active
                  ? "border-primary bg-primary text-primary-foreground"
                  : "border-border bg-muted/40 text-foreground hover:bg-muted",
                disabled && "pointer-events-none opacity-50",
              )}
            >
              <span className="block max-w-[140px] truncate">{p.label}</span>
              <span className="mt-0.5 block font-mono text-[0.65rem] opacity-80">
                {p.play_code}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}
