import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
import { ay as x, H as N, T as s, ax as f, C as y, a as w, K as a, x as l } from "../index-sdOMz8GW.js";
import { Settings as b, Moon as v, Globe as C, Layout as k, Palette as S } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const z = () => {
  const {
    mode: r,
    layout: o,
    primaryPreset: c,
    secondaryPreset: d,
    accentPreset: m,
    direction: g,
    setMode: h,
    setIsSettingsOpen: u,
    isSettingsOpen: i
  } = x();
  return /* @__PURE__ */ t(p, { children: [
    /* @__PURE__ */ e(
      N,
      {
        title: "Settings Panel",
        description: "Built-in UI for users to customize theme mode, layout, direction, and all color presets at runtime.",
        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-orange-500 via-red-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
      /* @__PURE__ */ t("div", { className: "text-center", children: [
        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Panel Features" }),
        /* @__PURE__ */ e(
          s,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "What users can customize through the settings panel"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: [
        {
          icon: /* @__PURE__ */ e(v, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
          title: "Mode Switching",
          description: "Toggle between light and dark modes.",
          iconBgClassName: "from-blue-500 to-indigo-500"
        },
        {
          icon: /* @__PURE__ */ e(C, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
          title: "RTL/LTR Direction",
          description: "Switch text direction for international apps.",
          iconBgClassName: "from-green-500 to-emerald-500"
        },
        {
          icon: /* @__PURE__ */ e(k, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
          title: "Layout Options",
          description: "Choose between Clean, Admin, and Horizontal layouts.",
          iconBgClassName: "from-orange-500 to-red-500"
        },
        {
          icon: /* @__PURE__ */ e(S, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
          title: "Color Management",
          description: "Organized in groups: Brand (primary, accent), Surfaces (secondary, backgrounds), Text (primary, muted, border), and Status (success, warning, error, info).",
          iconBgClassName: "from-pink-500 to-rose-500"
        }
      ].map((n) => /* @__PURE__ */ e(f, { layout: "horizontal", ...n }, n.title)) })
    ] }),
    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
      /* @__PURE__ */ t("div", { className: "text-center", children: [
        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Live Preview" }),
        /* @__PURE__ */ e(
          s,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Current theme state and interactive controls"
          }
        )
      ] }),
      /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(w, { title: "Current Settings", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
        /* @__PURE__ */ t("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-3", children: [
          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Mode" }),
            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: r })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Layout" }),
            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: o })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Primary" }),
            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: c?.label || "DEFAULT_PRIMARY" })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Secondary" }),
            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: d?.label || "DEFAULT_SECONDARY" })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Accent" }),
            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: m?.label || "DEFAULT_ACCENT" })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Direction" }),
            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: g || "LTR" })
          ] })
        ] }),
        /* @__PURE__ */ t("div", { className: "flex gap-2 w-full mt-4", children: [
          /* @__PURE__ */ t(
            l,
            {
              size: "small",
              onClick: () => h(r === "dark" ? "light" : "dark"),
              className: "flex-1",
              children: [
                "Toggle ",
                r === "dark" ? "Light" : "Dark"
              ]
            }
          ),
          /* @__PURE__ */ t(
            l,
            {
              size: "small",
              variant: "ghost",
              onClick: () => u(!i),
              className: "flex-1",
              children: [
                i ? "Close" : "Open",
                " Settings"
              ]
            }
          )
        ] })
      ] }) }) })
    ] })
  ] });
};
export {
  z as default
};
