/** 歷史區間切換（走勢圖 / 羅盤共用） */

export function RangeChips<T extends string>({
  options,
  value,
  onChange,
  hint,
}: {
  options: { key: T; label: string }[];
  value: T;
  onChange: (v: T) => void;
  hint?: string;
}) {
  return (
    <div className="range-chips-wrap">
      <div className="range-chips">
        {options.map((o) => (
          <button
            key={o.key}
            type="button"
            className={"range-chip" + (value === o.key ? " active" : "")}
            onClick={() => onChange(o.key)}
          >
            {o.label}
          </button>
        ))}
      </div>
      {hint && <div className="range-chips-hint small muted">{hint}</div>}
    </div>
  );
}

export const SERIES_RANGES = [
  { key: "1y", label: "1年" },
  { key: "5y", label: "5年" },
  { key: "10y", label: "10年" },
  { key: "max", label: "最遠" },
] as const;

export const WV_WINDOWS = [
  { key: "10y", label: "10年" },
  { key: "20y", label: "20年" },
  { key: "max", label: "最遠" },
] as const;

export type SeriesRange = (typeof SERIES_RANGES)[number]["key"];
export type WvWindow = (typeof WV_WINDOWS)[number]["key"];

const WV_HINTS: Record<WvWindow, string> = {
  "10y": "百分位與相似比對：近 10 年",
  "20y": "百分位與相似比對：近 20 年",
  max: "百分位與相似比對：資料庫最長歷史（多數指標約 2000 年起；聯準會利率約 2008 年起）",
};

export function wvWindowHint(w: WvWindow) {
  return WV_HINTS[w];
}