import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { isSlotDisabledBySelection, isSlotSelected, useVenueBookingSymbol } from "../../../hooks.js";
import { buildHourGroups, buildSlotPriceInfo, formatHourHeader, getColumnTag, getFirstAvailableSlotIndex, getPriceColor, getResourceCourtMeta, getSlotTag, getTableGridStyle, getTimeMetaFromGrid, isHourBoundary } from "../../../utils.js";
import { useVenueBookingContext } from "../../../context.js";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { isIos, locales } from "@pisell/utils";
import { Iconfont, PisellText } from "@pisell/materials";
//#region src/components/venueBooking/components/VenueSelection/components/TimeGrid.tsx
/**
* 时段网格
* 核心交互组件：横轴为时间（每 30 分钟一格），纵轴为资源/场地
* 数据来自 PisellOS venueBooking.getTimeSlotGrid()
*
* 结构：
* - 表头段（sticky）：外层 overflow-hidden 作为窗口，内层 grid 用 transform 跟随
*   表体横向 scrollLeft。纵向 sticky 相对外层页面滚动容器生效，实现吸顶。
* - 表体段：保留 overflow-x: auto、横向拖拽、点击选中/取消时段、切换日期自动滚到
*   首个可用时段。
* - 同步方向单向：body.scrollLeft -> headerInner.style.transform。
*/
function TimeGrid() {
	const symbol = useVenueBookingSymbol();
	const { viewModel, venueBookingModule, toggleSlot, filter, search, isGridLoading } = useVenueBookingContext();
	const grid = viewModel.timeSlotGrid;
	const timeLabels = (grid === null || grid === void 0 ? void 0 : grid.timeLabels) || [];
	const resources = (grid === null || grid === void 0 ? void 0 : grid.resources) || [];
	const hourGroups = useMemo(() => buildHourGroups(timeLabels), [timeLabels]);
	const tableGridStyle = useMemo(() => getTableGridStyle(timeLabels.length), [timeLabels.length]);
	/**
	* iOS 需要 overscroll-behavior: none 阻止 body 橡皮筋回弹导致的异常；
	* 桌面端保留 Y 方向的 scroll chaining，使鼠标悬停在此区域时仍能上下滚页面。
	*/
	const isIosDevice = useMemo(() => {
		if (typeof navigator === "undefined") return false;
		return isIos();
	}, []);
	const scrollerOverscrollStyle = useMemo(() => isIosDevice ? { overscrollBehavior: "none" } : {
		overscrollBehaviorX: "none",
		overscrollBehaviorY: "auto"
	}, [isIosDevice]);
	const visibleResources = useMemo(() => resources.filter((resource) => {
		const hitType = filter === "ALL" || resource.productTitle === filter;
		const hitSearch = !search || resource.resourceName.toLowerCase().includes(search.toLowerCase());
		return hitType && hitSearch;
	}), [
		filter,
		search,
		resources
	]);
	const scrollTableRef = useRef(null);
	const headerInnerRef = useRef(null);
	/**
	* Courts 左上角单元格。由于表头外层 overflow-hidden 不是滚动容器，
	* sticky 对其无效；通过反向 transform 抵消 headerInner 的横向位移，
	* 使其在横向滚动时视觉上固定在左侧。
	*/
	const headerFixedColRef = useRef(null);
	const dragStateRef = useRef({
		isDragging: false,
		pointerId: null,
		startX: 0,
		startY: 0,
		startScrollLeft: 0,
		moved: false
	});
	/**
	* 将表头内层位移同步到 body 的 scrollLeft，保持列对齐。
	* 同时对 Courts 单元格施加正向 transform 抵消父级位移，横向"钉"在左侧。
	*/
	const applyHeaderTransform = useCallback((scrollLeft) => {
		if (headerInnerRef.current) headerInnerRef.current.style.transform = `translateX(${-scrollLeft}px)`;
		if (headerFixedColRef.current) headerFixedColRef.current.style.transform = `translateX(${scrollLeft}px)`;
	}, []);
	function syncHeader(e) {
		applyHeaderTransform(e.currentTarget.scrollLeft);
	}
	useEffect(() => {
		if (isGridLoading) return;
		const scroller = scrollTableRef.current;
		if (!scroller || !timeLabels.length || !grid) return;
		const firstAvailableIndex = getFirstAvailableSlotIndex(grid);
		if (firstAvailableIndex <= 0) {
			applyHeaderTransform(scroller.scrollLeft);
			return;
		}
		const slotAreaWidth = Math.max(0, scroller.scrollWidth - 120);
		const slotWidth = timeLabels.length ? slotAreaWidth / timeLabels.length : 0;
		const scrollToIndex = Math.max(0, firstAvailableIndex - 1);
		const targetLeft = Math.max(0, scrollToIndex * slotWidth);
		scroller.scrollTo({
			left: targetLeft,
			behavior: "smooth"
		});
		applyHeaderTransform(targetLeft);
	}, [
		grid === null || grid === void 0 ? void 0 : grid.date,
		timeLabels.length,
		isGridLoading,
		applyHeaderTransform
	]);
	useEffect(() => {
		const scroller = scrollTableRef.current;
		if (!scroller) return void 0;
		function onPointerDown(e) {
			if (e.pointerType === "mouse" && e.button !== 0) return;
			if (e.target instanceof Element && e.target.closest("[data-cart-button=\"true\"], input, textarea")) return;
			dragStateRef.current = {
				isDragging: true,
				pointerId: e.pointerId,
				startX: e.clientX,
				startY: e.clientY,
				startScrollLeft: scroller.scrollLeft,
				moved: false
			};
		}
		function onPointerMove(e) {
			const state = dragStateRef.current;
			if (!state.isDragging || state.pointerId !== e.pointerId) return;
			const dx = e.clientX - state.startX;
			const dy = e.clientY - state.startY;
			if (Math.abs(dx) > 6 || Math.abs(dy) > 6) {
				var _hasPointerCapture;
				state.moved = true;
				if (!((_hasPointerCapture = scroller.hasPointerCapture) === null || _hasPointerCapture === void 0 ? void 0 : _hasPointerCapture.call(scroller, e.pointerId))) {
					var _setPointerCapture;
					(_setPointerCapture = scroller.setPointerCapture) === null || _setPointerCapture === void 0 || _setPointerCapture.call(scroller, e.pointerId);
				}
			}
			if (Math.abs(dx) >= Math.abs(dy)) {
				e.preventDefault();
				scroller.scrollLeft = state.startScrollLeft - dx;
				applyHeaderTransform(scroller.scrollLeft);
			}
		}
		function endDrag(e) {
			var _releasePointerCaptur;
			if (dragStateRef.current.pointerId !== e.pointerId) return;
			dragStateRef.current.isDragging = false;
			dragStateRef.current.pointerId = null;
			(_releasePointerCaptur = scroller.releasePointerCapture) === null || _releasePointerCaptur === void 0 || _releasePointerCaptur.call(scroller, e.pointerId);
		}
		scroller.addEventListener("pointerdown", onPointerDown);
		scroller.addEventListener("pointermove", onPointerMove, { passive: false });
		scroller.addEventListener("pointerup", endDrag);
		scroller.addEventListener("pointercancel", endDrag);
		return () => {
			scroller.removeEventListener("pointerdown", onPointerDown);
			scroller.removeEventListener("pointermove", onPointerMove);
			scroller.removeEventListener("pointerup", endDrag);
			scroller.removeEventListener("pointercancel", endDrag);
		};
	}, [applyHeaderTransform]);
	useEffect(() => {
		const scroller = scrollTableRef.current;
		if (!scroller) return void 0;
		function onWheel(e) {
			if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
				e.preventDefault();
				window.scrollBy({
					top: e.deltaY,
					behavior: "instant"
				});
			}
		}
		scroller.addEventListener("wheel", onWheel, { passive: false });
		return () => scroller.removeEventListener("wheel", onWheel);
	}, []);
	/** 记录哪些多商品资源是展开态（resourceId -> expanded） */
	const [expandedResources, setExpandedResources] = useState({});
	const toggleExpanded = useCallback((resourceId) => {
		setExpandedResources((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [String(resourceId)]: !prev[String(resourceId)] }));
	}, []);
	function handleSlotClick(resourceId, productId, slot) {
		if (dragStateRef.current.moved) {
			dragStateRef.current.moved = false;
			return;
		}
		if (slot.status !== "available") return;
		toggleSlot(resourceId, productId, slot);
	}
	if (isGridLoading || !grid || !timeLabels.length) return /* @__PURE__ */ React.createElement(TimeGridSkeleton, null);
	return /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement("div", {
		className: "sticky z-30 overflow-hidden bg-[#fff7f7]",
		style: { top: "var(--vb-grid-sticky-top, 0px)" }
	}, /* @__PURE__ */ React.createElement("div", {
		ref: headerInnerRef,
		className: "grid border-b border-black/6",
		style: _objectSpread2(_objectSpread2({}, tableGridStyle), {}, { willChange: "transform" }),
		key: `${grid.date}-header`
	}, /* @__PURE__ */ React.createElement("div", {
		ref: headerFixedColRef,
		className: "relative z-20 row-span-2 flex items-center gap-2 border-r border-black/6 bg-[#fff7f7] px-2 py-4 font-bold text-zinc-900 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4",
		style: { willChange: "transform" }
	}, /* @__PURE__ */ React.createElement(Iconfont, {
		type: "pisell2-clock",
		style: {
			fontSize: 16,
			color: "var(--vb-primary, #ea1018)"
		}
	}), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.venue.label.courts") || "场地")), hourGroups.map((slot, hourIdx) => {
		const slotIndex = timeLabels.indexOf(slot);
		const nextSlotIndex = slotIndex + 1;
		const timeMeta1 = getTimeMetaFromGrid(resources, slotIndex);
		const timeMeta2 = nextSlotIndex < timeLabels.length ? getTimeMetaFromGrid(resources, nextSlotIndex) : timeMeta1;
		const hourSoldOut = timeMeta1.soldOut && timeMeta2.soldOut;
		return /* @__PURE__ */ React.createElement("div", {
			key: slot,
			className: `col-span-2 px-1 py-3 text-center text-[12px] font-bold md:text-sm ${hourSoldOut ? "bg-zinc-100 text-zinc-400" : "text-zinc-700"}`,
			style: { borderLeft: "1px solid rgba(0,0,0,0.08)" }
		}, formatHourHeader(slot));
	}), timeLabels.map((slot, slotIndex) => {
		const timeMeta = getTimeMetaFromGrid(resources, slotIndex);
		const headerTag = getColumnTag(resources, slotIndex);
		return /* @__PURE__ */ React.createElement("div", {
			key: `${slot}-tag`,
			className: `px-1 py-1.5 text-center ${timeMeta.soldOut ? "bg-zinc-100 text-zinc-400" : "bg-white/55"}`,
			style: {
				borderTop: "1px solid rgba(0,0,0,0.04)",
				borderLeft: isHourBoundary(slot) ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.03)"
			}
		}, headerTag && !timeMeta.soldOut ? /* @__PURE__ */ React.createElement("span", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:text-[9px] ${headerTag.className}` }, headerTag.text) : null, timeMeta.soldOut ? /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-[10px] font-bold text-zinc-400" }, locales.getText("pisell2.venue.label.sold.out") || "已满") : null, !timeMeta.soldOut && timeMeta.fewLeft ? /* @__PURE__ */ React.createElement("div", {
			className: "mt-1 text-[10px] font-bold",
			style: { color: "var(--vb-primary)" }
		}, locales.getText("pisell2.venue.label.few.left") || "即将满") : null, !timeMeta.soldOut && !timeMeta.fewLeft && !headerTag ? /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-[10px] font-bold text-zinc-500" }, locales.getText("pisell2.venue.label.bookable") || "充足") : null);
	}))), /* @__PURE__ */ React.createElement("div", {
		ref: scrollTableRef,
		onScroll: syncHeader,
		className: "max-w-full overflow-x-auto cursor-grab select-none touch-pan-y active:cursor-grabbing",
		style: _objectSpread2({ WebkitOverflowScrolling: "touch" }, scrollerOverscrollStyle)
	}, /* @__PURE__ */ React.createElement("div", {
		className: "w-full",
		key: grid.date
	}, visibleResources.map((resource) => {
		const courtMeta = getResourceCourtMeta(resource);
		const isMultiProduct = !!resource.hasMultipleProducts && Array.isArray(resource.products);
		const expanded = !!expandedResources[String(resource.resourceId)];
		return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${resource.resourceId}-${grid.date}` }, /* @__PURE__ */ React.createElement("div", {
			className: "grid border-b border-black/6",
			style: tableGridStyle
		}, /* @__PURE__ */ React.createElement("div", { className: `sticky left-0 z-10 border-r border-black/6 px-2 py-2 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 ${courtMeta.soldOut ? "bg-zinc-50" : "bg-white"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, isMultiProduct ? /* @__PURE__ */ React.createElement("button", {
			type: "button",
			"data-cart-button": "true",
			onClick: (e) => {
				e.stopPropagation();
				toggleExpanded(resource.resourceId);
			},
			className: "flex h-5 w-5 items-center justify-center rounded text-zinc-500 hover:bg-black/5",
			"aria-label": expanded ? "collapse" : "expand"
		}, /* @__PURE__ */ React.createElement(Iconfont, {
			type: expanded ? "pisell2-chevron-down" : "pisell2-chevron-right",
			style: { fontSize: 12 }
		})) : null, /* @__PURE__ */ React.createElement("div", { className: `text-[13px] font-extrabold leading-5 md:text-[15px] ${courtMeta.soldOut ? "text-zinc-400" : "text-zinc-900"}` }, resource.resourceName)))), resource.slots.map((slot, slotIndex) => {
			const isAvailable = slot.status === "available";
			const isUnavailable = slot.status === "occupied" || slot.status === "past" || slot.status === "unavailable";
			const timeLabel = timeLabels[slotIndex] || "";
			const priceInfo = buildSlotPriceInfo(slot);
			const priceClass = getPriceColor(_objectSpread2(_objectSpread2({}, priceInfo), {}, { courtType: resource.productTitle }));
			const tag = getSlotTag(priceInfo);
			const tagText = (tag === null || tag === void 0 ? void 0 : tag.text) === "pisell2.venue.label.promo" ? locales.getText("pisell2.venue.label.promo") || "促销" : (tag === null || tag === void 0 ? void 0 : tag.text) === "pisell2.venue.label.off.peak" ? locales.getText("pisell2.venue.label.off.peak") || "非高峰" : null;
			const productIdForSingle = resource.productId;
			const disabledBySelection = !isMultiProduct && !isUnavailable ? isSlotDisabledBySelection(venueBookingModule, {
				resourceId: resource.resourceId,
				productId: productIdForSingle,
				startTime: slot.startTime
			}) : false;
			const isBlocked = isUnavailable || disabledBySelection;
			const selected = !isMultiProduct && isAvailable && isSlotSelected(venueBookingModule, resource.resourceId, slot.startTime, productIdForSingle);
			const interactive = !isMultiProduct && !isBlocked;
			const showPlusLabel = isMultiProduct && !isBlocked;
			return /* @__PURE__ */ React.createElement("button", {
				"data-slot-button": "true",
				key: `${resource.resourceId}-outer-${slot.startTime}`,
				onClick: () => {
					if (isMultiProduct) {
						if (isBlocked) return;
						toggleExpanded(resource.resourceId);
						return;
					}
					if (isBlocked) return;
					handleSlotClick(resource.resourceId, productIdForSingle, slot);
				},
				disabled: isBlocked,
				className: `px-1 py-2 text-center transition md:px-2 ${isBlocked ? "cursor-not-allowed bg-zinc-100 text-zinc-400" : selected ? "text-white" : "bg-white hover:bg-[#fff6f6]"}`,
				style: _objectSpread2({
					borderLeft: isHourBoundary(timeLabel) ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.03)",
					borderBottom: "1px solid rgba(0,0,0,0.04)"
				}, selected && interactive ? { backgroundColor: "var(--vb-primary)" } : null)
			}, isBlocked ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center gap-1 text-zinc-400" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-bold leading-none" }, "×")) : selected ? /* @__PURE__ */ React.createElement("div", { className: "space-y-0.5" }, /* @__PURE__ */ React.createElement(PisellText.Amount, {
				value: Number(slot.price || 0),
				symbol,
				precision: 2,
				showCurrencySymbol: true,
				className: "text-[13px] font-extrabold leading-4 text-white md:text-sm"
			})) : /* @__PURE__ */ React.createElement("div", { className: "space-y-0.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline justify-center gap-0.5" }, /* @__PURE__ */ React.createElement(PisellText.Amount, {
				value: Number(slot.price || 0),
				symbol,
				precision: 2,
				showCurrencySymbol: true,
				hideDecimalForWholeNumbers: true,
				className: `text-[13px] font-normal leading-4 ${priceClass} md:text-sm`
			}), showPlusLabel ? /* @__PURE__ */ React.createElement("span", { className: `text-[13px] font-semibold leading-4 ${priceClass} md:text-sm` }, "+") : null), tag ? /* @__PURE__ */ React.createElement("div", { className: `inline-flex rounded-full px-1.5 py-0 text-[8px] font-semibold leading-4 ring-1 md:text-[9px] ${tag.className}` }, tagText) : null));
		})), isMultiProduct && expanded && resource.products.map((subRow) => /* @__PURE__ */ React.createElement("div", {
			key: `${resource.resourceId}-sub-${subRow.productId}`,
			className: "grid border-b border-black/6 bg-zinc-50/60",
			style: tableGridStyle
		}, /* @__PURE__ */ React.createElement("div", { className: "sticky left-0 z-10 border-r border-black/6 bg-zinc-50/60 px-2 py-2 pl-8 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 md:pl-10" }, /* @__PURE__ */ React.createElement("div", { className: "text-[12px] font-semibold leading-5 text-zinc-700 md:text-[13px]" }, subRow.productTitle)), subRow.slots.map((slot, slotIndex) => {
			const isAvailable = slot.status === "available";
			const isUnavailable = slot.status === "occupied" || slot.status === "past" || slot.status === "unavailable";
			const timeLabel = timeLabels[slotIndex] || "";
			const disabledBySelection = !isUnavailable && isSlotDisabledBySelection(venueBookingModule, {
				resourceId: resource.resourceId,
				productId: subRow.productId,
				startTime: slot.startTime
			});
			const isBlocked = isUnavailable || disabledBySelection;
			const selected = isAvailable && isSlotSelected(venueBookingModule, resource.resourceId, slot.startTime, subRow.productId);
			const interactive = !isBlocked;
			const priceClass = getPriceColor(_objectSpread2(_objectSpread2({}, buildSlotPriceInfo(slot)), {}, { courtType: subRow.productTitle }));
			return /* @__PURE__ */ React.createElement("button", {
				"data-slot-button": "true",
				key: `${resource.resourceId}-${subRow.productId}-${slot.startTime}`,
				onClick: () => {
					if (!interactive) return;
					handleSlotClick(resource.resourceId, subRow.productId, slot);
				},
				disabled: !interactive,
				className: `px-1 py-2 text-center transition md:px-2 ${isBlocked ? "cursor-not-allowed bg-zinc-100 text-zinc-400" : selected ? "text-white" : "bg-white hover:bg-[#fff6f6]"}`,
				style: _objectSpread2({
					borderLeft: isHourBoundary(timeLabel) ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.03)",
					borderBottom: "1px solid rgba(0,0,0,0.04)"
				}, selected && interactive ? { backgroundColor: "var(--vb-primary)" } : null)
			}, isBlocked ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center gap-1 text-zinc-400" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-bold leading-none" }, "×")) : /* @__PURE__ */ React.createElement("div", { className: "space-y-0.5" }, /* @__PURE__ */ React.createElement(PisellText.Amount, {
				value: Number(slot.price || 0),
				symbol,
				precision: 2,
				showCurrencySymbol: true,
				hideDecimalForWholeNumbers: true,
				className: `text-[13px] leading-4 ${selected ? "font-extrabold text-white" : `font-normal ${priceClass}`} md:text-sm`
			})));
		}))));
	}))));
}
/**
* TimeGrid 骨架屏
* 结构对齐正常态：左侧固定"Courts"列 + 右侧横向时段列
* 不依赖 grid 数据，避免闪烁；骨架块用 vb-skeleton-shimmer 的光条动画
*/
function TimeGridSkeleton() {
	const SKELETON_ROWS = 5;
	const SKELETON_COLS = 8;
	return /* @__PURE__ */ React.createElement("div", {
		className: "relative",
		"aria-busy": "true",
		"aria-live": "polite"
	}, /* @__PURE__ */ React.createElement("div", {
		className: "sticky z-30 overflow-hidden bg-[#fff7f7]",
		style: { top: "var(--vb-grid-sticky-top, 0px)" }
	}, /* @__PURE__ */ React.createElement("div", {
		className: "grid border-b border-black/6",
		style: { gridTemplateColumns: `120px repeat(${SKELETON_COLS}, minmax(90px, 1fr))` }
	}, /* @__PURE__ */ React.createElement("div", { className: "relative z-20 flex items-center gap-2 border-r border-black/6 bg-[#fff7f7] px-2 py-4 font-bold text-zinc-900 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4" }, /* @__PURE__ */ React.createElement(Iconfont, {
		type: "pisell2-clock",
		style: {
			fontSize: 16,
			color: "var(--vb-primary, #ea1018)"
		}
	}), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.venue.label.courts") || "场地")), Array.from({ length: SKELETON_COLS }).map((_, idx) => /* @__PURE__ */ React.createElement("div", {
		key: `sk-h-${idx}`,
		className: "relative flex items-center justify-center overflow-hidden px-1 py-3",
		style: { borderLeft: "1px solid rgba(0,0,0,0.08)" }
	}, /* @__PURE__ */ React.createElement("div", { className: "h-3 w-10 rounded bg-zinc-200/80" }), /* @__PURE__ */ React.createElement("span", {
		className: "vb-skeleton-shimmer",
		"aria-hidden": "true"
	}))))), /* @__PURE__ */ React.createElement("div", { className: "w-full" }, Array.from({ length: SKELETON_ROWS }).map((_, rowIdx) => /* @__PURE__ */ React.createElement("div", {
		key: `sk-row-${rowIdx}`,
		className: "grid border-b border-black/6",
		style: { gridTemplateColumns: `120px repeat(${SKELETON_COLS}, minmax(90px, 1fr))` }
	}, /* @__PURE__ */ React.createElement("div", { className: "sticky left-0 z-10 border-r border-black/6 bg-white px-2 py-4 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4" }, /* @__PURE__ */ React.createElement("div", { className: "relative overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "h-4 w-20 rounded bg-zinc-200/80 md:w-24" }), /* @__PURE__ */ React.createElement("div", { className: "mt-2 h-2.5 w-14 rounded bg-zinc-200/60 md:w-16" }), /* @__PURE__ */ React.createElement("span", {
		className: "vb-skeleton-shimmer",
		"aria-hidden": "true"
	}))), Array.from({ length: SKELETON_COLS }).map((_, colIdx) => /* @__PURE__ */ React.createElement("div", {
		key: `sk-cell-${rowIdx}-${colIdx}`,
		className: "relative overflow-hidden px-1 py-3",
		style: {
			borderLeft: colIdx % 2 === 0 ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.03)",
			borderBottom: "1px solid rgba(0,0,0,0.04)",
			backgroundColor: "#fff"
		}
	}, /* @__PURE__ */ React.createElement("div", { className: "mx-auto h-3 w-10 rounded bg-zinc-200/70 md:h-3.5 md:w-12" }), /* @__PURE__ */ React.createElement("span", {
		className: "vb-skeleton-shimmer",
		"aria-hidden": "true"
	})))))));
}
//#endregion
export { TimeGrid as default };
