// frontend/components/dashboard/ScheduleCard.tsx
"use client";
import type { CSSProperties } from "react";
import { Icon } from "@/components/Icon";
import type { ScheduleItem } from "@/lib/types";

export function ScheduleCard({ items }: { items: ScheduleItem[] }) {
  return (
    <section className="card">
      <div className="ch">
        <div className="ico">
          <Icon name="cal" />
        </div>
        <div className="htext">
          <h3>오늘 일정</h3>
          <div className="sub">{items.length}개 · 다음까지 2시간</div>
        </div>
        <button className="tool" aria-label="더보기">
          <Icon name="more" />
        </button>
      </div>
      {items.length === 0 ? (
        <div className="appr-empty">
          <span className="ae-tick">
            <Icon name="tick" w={3} />
          </span>
          오늘은 일정이 없어요. 여유로운 하루예요.
        </div>
      ) : (
        <div className="sched">
          {items.map((e) => (
            <div className="ev" key={e.id}>
              <div className="ev-time mono">{e.time}</div>
              <div className="ev-body" style={{ "--accent": `var(--${e.tone})` } as CSSProperties}>
                <div className="ev-title">{e.title}</div>
                <div className="ev-meta">
                  <span>{e.tag}</span>
                  <span className="dur">{e.dur}</span>
                </div>
              </div>
              {e.soon && <span className="soon">곧</span>}
            </div>
          ))}
          <div className="sched-note" key="sched-note">
            <Icon name="bell" />
            치과 예약은 16:00로 옮겨뒀어요 — 결재함에서 되돌릴 수 있어요.
          </div>
        </div>
      )}
    </section>
  );
}