// frontend/components/calendar/CalToggleList.tsx — 캘린더 카테고리 토글 목록
"use client";
import { Icon } from "@/components/Icon";
import type { Calendar } from "@/lib/calendar/types";

export function CalToggleList({
  calendars,
  calOn,
  onToggle,
}: {
  calendars: Calendar[];
  calOn: Record<string, boolean>;
  onToggle: (id: string) => void;
}) {
  return (
    <div className="cal-list">
      {calendars.map((c) => {
        const on = calOn[c.id] !== false;
        return (
          <button
            key={c.id}
            className={"cal-toggle" + (on ? "" : " off")}
            onClick={() => onToggle(c.id)}
            aria-pressed={on}
          >
            <span className="cbx" style={{ background: `var(--${c.tone})` }}>
              <Icon name="tick" w={3} />
            </span>
            <span>{c.name}</span>
            <span className="ct-n">{c.count}</span>
          </button>
        );
      })}
    </div>
  );
}
