// frontend/components/calendar/FocusBlock.tsx — 아리가 빈 시간에 배치한 집중 블록
"use client";
import { Icon } from "@/components/Icon";
import { toMin, topOf, PXH } from "@/lib/calendar/time";
import type { FocusBlock as FocusBlockT } from "@/lib/calendar/types";

export function FocusBlock({ b }: { b: FocusBlockT }) {
  const top = topOf(b.start);
  const h = ((toMin(b.end) - toMin(b.start)) / 60) * PXH;
  const short = h < 40;
  return (
    <div
      className={"fblock " + b.type + (short ? " short" : "")}
      style={{ top: top + "px", height: Math.max(h - 3, 22) + "px" }}
      onClick={(e) => e.stopPropagation()}
    >
      <div className="fb-k">
        <Icon name="spark" />
        {b.tag}
      </div>
      <div className="fbt">{b.title}</div>
    </div>
  );
}