stock_chart_site/web/components/PeriodTabs.tsx

"use client";

import type { ChartInterval } from "../lib/api";

// 7-탭 기간 셀렉터. 각 탭이 (interval, days) 쌍으로 풀린다.
// 1D 만 10분봉, 5Y/MAX 는 자동으로 주봉/월봉 사용 (포인트 수 폭주 방지).

export type Period = "1D" | "1W" | "1M" | "3M" | "1Y" | "5Y" | "ALL";

type PeriodSpec = { id: Period; label: string; interval: ChartInterval; days: number };

const PERIODS: PeriodSpec[] = [
  { id: "1D", label: "1일", interval: "10m", days: 1 },
  { id: "1W", label: "1주", interval: "1d", days: 7 },
  { id: "1M", label: "1달", interval: "1d", days: 30 },
  { id: "3M", label: "3달", interval: "1d", days: 90 },
  { id: "1Y", label: "1년", interval: "1d", days: 365 },
  { id: "5Y", label: "5년", interval: "1w", days: 365 * 5 },
  { id: "ALL", label: "최대", interval: "1mo", days: 365 * 20 },
];

export function periodSpec(id: Period): PeriodSpec {
  return PERIODS.find((p) => p.id === id) ?? PERIODS[2];
}

type Props = {
  value: Period;
  onChange: (id: Period, interval: ChartInterval, days: number) => void;
};

export function PeriodTabs({ value, onChange }: Props) {
  return (
    <div className="inline-flex rounded-full border border-zinc-800 bg-zinc-900 p-1 text-xs">
      {PERIODS.map((p) => {
        const active = value === p.id;
        return (
          <button
            key={p.id}
            onClick={() => onChange(p.id, p.interval, p.days)}
            className={
              active
                ? "rounded-full bg-zinc-700 px-3 py-1 font-medium text-zinc-50"
                : "rounded-full px-3 py-1 text-zinc-400 hover:text-zinc-100"
            }
          >
            {p.label}
          </button>
        );
      })}
    </div>
  );
}