import { useVenueBookingContext } from "../../../context.js";
import React, { useMemo } from "react";
import { locales } from "@pisell/utils";
//#region src/components/venueBooking/components/VenueSelection/components/CourtFilter.tsx
/**
* 场地筛选器
* 包含搜索框和场地类型标签（All / Badminton / Pickleball 等）
* 类型从 timeSlotGrid.resources 的 productTitle 去重提取
*/
function CourtFilter() {
	const { search, setSearch, filter, setFilter, viewModel } = useVenueBookingContext();
	const courtTypes = useMemo(() => {
		var _viewModel$timeSlotGr;
		const resources = ((_viewModel$timeSlotGr = viewModel.timeSlotGrid) === null || _viewModel$timeSlotGr === void 0 ? void 0 : _viewModel$timeSlotGr.resources) || [];
		return Array.from(new Set(resources.map((r) => r.productTitle)));
	}, [viewModel.timeSlotGrid]);
	const filterOptions = [{
		label: locales.getText("pisell2.venue.filter.all") || "全部",
		value: "ALL"
	}, ...courtTypes.map((type) => ({
		label: type,
		value: type
	}))];
	return /* @__PURE__ */ React.createElement("div", { className: "mt-4 grid gap-3 md:mt-5 xl:grid-cols-[1fr_auto] xl:items-center" }, courtTypes.length > 1 ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2" }, filterOptions.map((opt) => /* @__PURE__ */ React.createElement("button", {
		key: opt.value,
		onClick: () => setFilter(opt.value),
		className: `rounded-full px-4 py-2 text-sm font-semibold transition ${filter === opt.value ? "text-white" : "bg-[#fafafa] text-zinc-700 ring-1 ring-black/8"}`,
		style: filter === opt.value ? { backgroundColor: "var(--vb-primary)" } : void 0
	}, opt.label))) : null);
}
//#endregion
export { CourtFilter as default };
