import { getPalaceInterpretVisibleTabs } from "@/lib/tuvi-palace-section-priority";

import { TUVI_INTERPRET_TABS, type TuViInterpretPanelTabId } from "./tuvi-interpret-tabs.config";

type Props = {
  /** Khi có — chỉ hiện tab phù hợp nghĩa cung (Tu Vi). */
  palaceKey?: string;
  active: TuViInterpretPanelTabId;
  onSelect: (id: TuViInterpretPanelTabId) => void;
  className?: string;
  /** Nhỏ hơn khi dùng trong header overlay */
  size?: "default" | "compact";
};

/**
 * Thanh mục luận — trên mobile cuộn ngang; trùng nội dung với panel khi mở overlay.
 */
export function TuViInterpretTabStrip({ palaceKey, active, onSelect, className = "", size = "default" }: Props) {
  const pad = size === "compact" ? "px-2.5 py-1.5 text-[10px]" : "px-3 py-2 text-[11px]";
  const allowed = palaceKey ? new Set(getPalaceInterpretVisibleTabs(palaceKey)) : null;
  const tabs = allowed ? TUVI_INTERPRET_TABS.filter((t) => allowed.has(t.id)) : TUVI_INTERPRET_TABS;
  return (
    <div
      className={`-mx-1 flex gap-1 sm:gap-1.5 overflow-x-auto overflow-y-hidden pb-1 [-webkit-overflow-scrolling:touch] ${className}`}
      role="tablist"
      aria-label="Mục luận giải"
    >
      {tabs.map(({ id, label }) => (
        <button
          key={id}
          type="button"
          role="tab"
          aria-selected={active === id}
          onClick={() => onSelect(id)}
          className={`shrink-0 rounded-md font-ctkp-serif tracking-[0.05em] transition-[background-color,border-color,color] duration-200 ${pad} ${
            active === id
              ? "border border-[#d4af37]/38 bg-[#d4af37]/14 text-[#f5d878]"
              : "border border-transparent text-slate-400 hover:border-[#d4af37]/18 hover:bg-[#0a1020]/65 hover:text-slate-200"
          }`}
        >
          {label}
        </button>
      ))}
    </div>
  );
}