// frontend/components/calendar/MiniCal.tsx — 미니 달력 (2026년 6월)
"use client";
import { Icon } from "@/components/Icon";

export function MiniCal({
  sel,
  today,
  weekdays,
  eventsByDay,
  onSel,
}: {
  sel: number;
  today: number;
  weekdays: string[];
  eventsByDay: Record<number, number>;
  onSel: (n: number) => void;
}) {
  const first = new Date(2026, 5, 1);
  const off = first.getDay();
  const cells: { inMonth: boolean; n: number }[] = [];
  for (let i = 0; i < 42; i++) {
    const d = new Date(2026, 5, 1 - off + i);
    cells.push({ inMonth: d.getMonth() === 5, n: d.getDate() });
  }
  return (
    <div className="minical">
      <div className="mc-head">
        <span className="mc-title">2026년 6월</span>
        <span className="mc-nav">
          <button aria-label="이전 달">
            <Icon name="chev" className="ic flip" />
          </button>
          <button aria-label="다음 달">
            <Icon name="chev" />
          </button>
        </span>
      </div>
      <div className="mc-grid">
        {weekdays.map((w) => (
          <div key={w} className="mc-wd">
            {w}
          </div>
        ))}
        {cells.map((c, i) => (
          <button
            key={i}
            className={
              "mc-day" +
              (c.inMonth ? "" : " out") +
              (c.inMonth && c.n === today ? " today" : "") +
              (c.inMonth && c.n === sel ? " sel" : "")
            }
            onClick={() => c.inMonth && onSel(c.n)}
          >
            {c.n}
            {c.inMonth && eventsByDay[c.n] && <span className="evdot" />}
          </button>
        ))}
      </div>
    </div>
  );
}
