"use client";
import { cn } from "./index3.js";
import { formatHour } from "./index57.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var VISIBLE_HOURS = 8;
function TimeGrid({ startHour, endHour, children, className }) {
	const hours = React.useMemo(() => Array.from({ length: endHour - startHour }, (_, i) => startHour + i), [startHour, endHour]);
	const scrollRef = React.useRef(null);
	React.useEffect(() => {
		const currentHour = (/* @__PURE__ */ new Date()).getHours();
		if (scrollRef.current && currentHour >= startHour && currentHour < endHour) {
			const offset = (currentHour - startHour) * 96 - 96;
			scrollRef.current.scrollTop = Math.max(0, offset);
		}
	}, [startHour, endHour]);
	return /* @__PURE__ */ jsx("div", {
		ref: scrollRef,
		"data-slot": "time-grid",
		role: "region",
		"aria-label": "Time grid",
		tabIndex: 0,
		className: cn("relative overflow-y-auto focus:outline-none", className),
		style: { maxHeight: `${VISIBLE_HOURS * 96}px` },
		children: /* @__PURE__ */ jsxs("div", {
			className: "relative",
			style: { height: `${hours.length * 96}px` },
			children: [
				hours.map((hour) => /* @__PURE__ */ jsx("div", {
					className: "absolute left-0 w-[72px] pr-2 text-right",
					style: { top: `${(hour - startHour) * 96}px` },
					children: /* @__PURE__ */ jsx("span", {
						className: "relative -top-2 text-[10px] text-muted-foreground",
						children: formatHour(hour)
					})
				}, hour)),
				hours.map((hour) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("div", {
					className: "absolute left-[72px] right-0 border-b border-border/50",
					style: { top: `${(hour - startHour) * 96}px` }
				}), /* @__PURE__ */ jsx("div", {
					className: "absolute left-[72px] right-0 border-b border-dashed border-border/30",
					style: { top: `${(hour - startHour) * 96 + 96 / 2}px` }
				})] }, `grid-${hour}`)),
				/* @__PURE__ */ jsx("div", {
					className: "absolute left-[72px] right-0 top-0 bottom-0",
					children
				})
			]
		})
	});
}
TimeGrid.displayName = "TimeGrid";
//#endregion
export { TimeGrid };

//# sourceMappingURL=index62.js.map