import { jsx, Fragment, jsxs } from "react/jsx-runtime";
import { T as Tabs, a as TabsList, b as TabsTrigger, c as TabsContent } from "./tabs-C0o9riYx.js";
import { u as useTranslations, L as Layout } from "./layout-toNsB0Jp.js";
import { Head } from "@inertiajs/react";
import "@radix-ui/react-tabs";
import "./index-CY6fYws-.js";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "clsx";
import "tailwind-merge";
import "./input-DfkIsvXR.js";
import "./label-DrpjkvJN.js";
import "@radix-ui/react-label";
import "@icons-pack/react-simple-icons";
import "lucide-react";
import "./select-CsRyyQUa.js";
import "@radix-ui/react-select";
import "./sheet-Bq2cyJmx.js";
import "@radix-ui/react-dialog";
function Product({
  product
}) {
  const { t } = useTranslations();
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Layout, { children: [
    /* @__PURE__ */ jsx(Head, { title: "Our Products" }),
    /* @__PURE__ */ jsxs("section", { className: "mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-8", children: [
      /* @__PURE__ */ jsx("h1", { className: "font-serif text-5xl font-medium tracking-tight", children: t("pages.product.sections.first.title") }),
      /* @__PURE__ */ jsxs(
        Tabs,
        {
          defaultValue: "traditional",
          className: "flex flex-col gap-8",
          children: [
            /* @__PURE__ */ jsxs(TabsList, { className: "flex items-center gap-4 bg-transparent", children: [
              /* @__PURE__ */ jsx(
                TabsTrigger,
                {
                  value: "traditional",
                  className: "!h-auto cursor-pointer px-4 py-2 data-[state=active]:bg-primary data-[state=active]:text-white",
                  children: t("pages.product.sections.first.tab1")
                }
              ),
              /* @__PURE__ */ jsx(
                TabsTrigger,
                {
                  value: "modern",
                  className: "!h-auto cursor-pointer px-4 py-2 data-[state=active]:bg-primary data-[state=active]:text-white",
                  children: t("pages.product.sections.first.tab2")
                }
              ),
              /* @__PURE__ */ jsx(
                TabsTrigger,
                {
                  value: "abstract",
                  className: "!h-auto cursor-pointer px-4 py-2 data-[state=active]:bg-primary data-[state=active]:text-white",
                  children: t("pages.product.sections.first.tab3")
                }
              )
            ] }),
            /* @__PURE__ */ jsx(TabsContent, { value: "traditional", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4", children: product.map(
              (e, index) => e.type === "traditional" ? /* @__PURE__ */ jsx(
                "img",
                {
                  src: e.image_url,
                  alt: e.title,
                  className: "aspect-video rounded-md object-cover object-center"
                },
                index
              ) : null
            ) }) }),
            /* @__PURE__ */ jsx(TabsContent, { value: "modern", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4", children: product.map(
              (e, index) => e.type === "modern" ? /* @__PURE__ */ jsx(
                "img",
                {
                  src: e.image_url,
                  alt: e.title,
                  className: "aspect-video rounded-md object-cover object-center"
                },
                index
              ) : null
            ) }) }),
            /* @__PURE__ */ jsx(TabsContent, { value: "abstract", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4", children: product.map(
              (e, index) => e.type === "abstract" ? /* @__PURE__ */ jsx(
                "img",
                {
                  src: e.image_url,
                  alt: e.title,
                  className: "aspect-video rounded-md object-cover object-center"
                },
                index
              ) : null
            ) }) })
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-8 max-md:px-8", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
        /* @__PURE__ */ jsx("h2", { className: "font-serif text-3xl font-medium tracking-tight", children: t("pages.product.sections.second.title") }),
        /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: t("pages.product.sections.second.desc") })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4", children: product.map(
        (e, index) => e.type === "art" ? /* @__PURE__ */ jsx(
          "img",
          {
            src: e.image_url,
            alt: e.title,
            className: "aspect-video rounded-md object-cover object-center"
          },
          index
        ) : null
      ) })
    ] })
  ] }) });
}
export {
  Product as default
};