import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { s as Store } from "../_libs/lucide-react.mjs";
import { a as p, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { a as useStores } from "./prominent-api-hooks-CNVDntUD.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/stores-CcccRdgP.js
var import_jsx_runtime = require_jsx_runtime();
function StoresPage() {
	const navigate = useNavigate();
	const { data } = useStores();
	const stores = data?.data || [];
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
		weight: "bold",
		className: "mb-4 text-xl",
		children: "Our Stores"
	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
		className: "grid grid-cols-2 gap-4",
		children: stores.map((store) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
			onClick: () => navigate({
				to: "/stores/$storeId",
				params: { storeId: String(store.id) }
			}),
			className: "rounded-xl border border-gray-100 bg-white p-4 shadow-sm",
			children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "mb-3 flex h-32 w-full items-center justify-center overflow-hidden rounded-lg bg-gray-100",
					children: store.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
						src: store.imageUrl,
						alt: store.name,
						className: "h-full w-full object-cover"
					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Store, { className: "h-10 w-10 text-gray-400" })
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
					weight: "semibold",
					className: "text-sm",
					children: store.name
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
					className: "text-xs text-gray-500",
					children: [store.productCount || 0, " products"]
				})
			]
		}, store.id))
	})] });
}
//#endregion
export { StoresPage as component };