// frontend/components/calendar/EvBlock.tsx — 주/일 그리드의 이벤트 블록
"use client";
import type { MouseEvent } from "react";
import { toMin, topOf, PXH } from "@/lib/calendar/time";
import type { CalEvent, Calendar } from "@/lib/calendar/types";

export function EvBlock({
  ev,
  cal,
  onClick,
}: {
  ev: CalEvent;
  cal: Calendar;
  onClick: (ev: CalEvent, e: MouseEvent) => void;
}) {
  const top = topOf(ev.start);
  const h = ((toMin(ev.end) - toMin(ev.start)) / 60) * PXH;
  const short = h < 38;
  return (
    <div
      className={"ev tint-" + cal.tone + (ev.soon ? " soon" : "") + (short ? " short" : "")}
      style={{ top: top + "px", height: Math.max(h - 3, 20) + "px" }}
      onClick={(e) => {
        e.stopPropagation();
        onClick(ev, e);
      }}
    >
      <div className="et">{ev.title}</div>
      <div className="etm">
        {ev.start}–{ev.end}
      </div>
    </div>
  );
}
