import type { TuViChartViewModel } from "@/lib/tuvi-chart-view-model";

export type TuViTopTabKey = TuViChartViewModel["tabs"][number]["key"];

type Props = {
  tabs: TuViChartViewModel["tabs"];
  active: TuViTopTabKey;
  onChange: (key: TuViTopTabKey) => void;
  className?: string;
};

export function TuViTopTabs({ tabs, active, onChange, className = "" }: Props) {
  return (
    <div
      id="ctkp-tuvi-tabs"
      className={`rounded-lg border border-[#d4af37]/12 bg-[#050814]/75 py-2 pl-2 pr-1 shadow-[inset_0_1px_0_rgba(212,175,55,0.06)] backdrop-blur-sm ${className}`}
    >
      <div className="-mx-0.5 overflow-x-auto overscroll-x-contain">
        <div
          className="flex min-w-max gap-1 px-1 sm:gap-1.5"
          role="tablist"
          aria-label="Xem theo từng lớp lá số"
        >
          {tabs.map((t) => {
            const isActive = active === t.key;
            const gated = !t.enabled;
            return (
              <button
                key={t.key}
                id={`ctkp-tuvi-top-tab-${t.key}`}
                type="button"
                role="tab"
                aria-selected={isActive}
                aria-controls="ctkp-tuvi-top-panel"
                onClick={() => onChange(t.key)}
                className={[
                  "shrink-0 rounded-md px-3 py-2 font-ctkp-serif text-[11px] tracking-[0.08em] transition-[color,background-color,border-color,box-shadow,transform]",
                  isActive
                    ? "border border-[#d4af37]/5 bg-[#d4af37]/16 text-[#f5e6b8] shadow-[0_0_24px_-8px_rgba(212,175,55,0.4)]"
                    : "border border-transparent bg-transparent text-slate-500 hover:border-[#d4af37]/18 hover:bg-[#0a0f1c]/80 hover:text-slate-200",
                  gated && !isActive ? "opacity-55" : "",
                ].join(" ")}
              >
                {t.label}
                {gated ?
                  <span className="ml-1 text-[9px] font-sans font-normal normal-case tracking-normal text-slate-500">
                    (sắp có)
                  </span>
                : null}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}