"use client";
import { cn } from "./index3.js";
import { parseEventDate } from "./index57.js";
import { FOCUS_RING } from "./index58.js";
import { EVENT_COLOR_CLASSES } from "./index59.js";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";
import { format } from "date-fns";
//#region src/components/molecules/data/Calendar/_shared/EventBlock.tsx
var eventBlockVariants = cva(["rounded-lg p-2 text-xs cursor-pointer transition-[opacity,transform,box-shadow] duration-200 ease-out hover:opacity-90 hover:-translate-y-px hover:shadow-md active:translate-y-0 active:shadow-sm overflow-hidden motion-reduce:transition-none motion-reduce:hover:translate-y-0", FOCUS_RING].join(" "), {
	variants: { color: EVENT_COLOR_CLASSES },
	defaultVariants: { color: "brand" }
});
function EventBlock({ event, top, height, onClick, className, style }) {
	const startDate = parseEventDate(event.start);
	const endDate = event.end ? parseEventDate(event.end) : null;
	return /* @__PURE__ */ jsxs("button", {
		type: "button",
		"data-slot": "event-block",
		"aria-label": `${event.title}, ${format(startDate, "h:mm a")}${endDate ? ` to ${format(endDate, "h:mm a")}` : ""}`,
		onClick: (e) => {
			e.stopPropagation();
			onClick?.(event);
		},
		className: cn(eventBlockVariants({ color: event.color }), "absolute text-start", className),
		style: {
			top: `${top}px`,
			height: `${Math.max(height, 24)}px`,
			...style
		},
		children: [/* @__PURE__ */ jsx("div", {
			className: "font-medium",
			children: event.title
		}), height >= 40 && /* @__PURE__ */ jsxs("div", {
			className: "mt-0.5 text-[11px] opacity-70",
			children: [format(startDate, "h:mm a"), endDate && ` – ${format(endDate, "h:mm a")}`]
		})]
	});
}
EventBlock.displayName = "EventBlock";
//#endregion
export { EventBlock };

//# sourceMappingURL=index60.js.map