"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card.js";
import { Badge } from "../../ui/badge.js";
import { Button } from "../../ui/button.js";
import { Copy, Palette, Monitor, Sun, Moon } from "lucide-react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
function ThemePreview() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  if (!mounted) {
    return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded animate-pulse" }) }),
      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted rounded animate-pulse" }),
        /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted rounded animate-pulse w-2/3" })
      ] }) })
    ] }, i)) }) });
  }
  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(Palette, { className: "h-5 w-5" }),
          "Theme Controls"
        ] }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Switch between light and dark themes to preview color variations" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ jsxs(
          Button,
          {
            variant: theme === "light" ? "default" : "outline",
            size: "sm",
            onClick: () => setTheme("light"),
            className: "flex items-center gap-2",
            children: [
              /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }),
              "Light"
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          Button,
          {
            variant: theme === "dark" ? "default" : "outline",
            size: "sm",
            onClick: () => setTheme("dark"),
            className: "flex items-center gap-2",
            children: [
              /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" }),
              "Dark"
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          Button,
          {
            variant: theme === "system" ? "default" : "outline",
            size: "sm",
            onClick: () => setTheme("system"),
            className: "flex items-center gap-2",
            children: [
              /* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4" }),
              "System"
            ]
          }
        ),
        /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "ml-auto", children: [
          "Current: ",
          theme
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
      /* @__PURE__ */ jsxs(Card, { children: [
        /* @__PURE__ */ jsxs(CardHeader, { children: [
          /* @__PURE__ */ jsx(CardTitle, { children: "Primary Colors" }),
          /* @__PURE__ */ jsx(CardDescription, { children: "Main brand colors and accent tones" })
        ] }),
        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Primary",
              description: "Main brand color",
              cssVar: "--primary",
              copyValue: "var(--primary)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Primary Foreground",
              description: "Text on primary background",
              cssVar: "--primary-foreground",
              copyValue: "var(--primary-foreground)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Secondary",
              description: "Secondary brand color",
              cssVar: "--secondary",
              copyValue: "var(--secondary)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Secondary Foreground",
              description: "Text on secondary background",
              cssVar: "--secondary-foreground",
              copyValue: "var(--secondary-foreground)"
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ jsxs(Card, { children: [
        /* @__PURE__ */ jsxs(CardHeader, { children: [
          /* @__PURE__ */ jsx(CardTitle, { children: "Background Colors" }),
          /* @__PURE__ */ jsx(CardDescription, { children: "Page and card background colors" })
        ] }),
        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Background",
              description: "Main page background",
              cssVar: "--background",
              copyValue: "var(--background)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Foreground",
              description: "Main text color",
              cssVar: "--foreground",
              copyValue: "var(--foreground)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Card",
              description: "Card background",
              cssVar: "--card",
              copyValue: "var(--card)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Card Foreground",
              description: "Text on card background",
              cssVar: "--card-foreground",
              copyValue: "var(--card-foreground)"
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ jsxs(Card, { children: [
        /* @__PURE__ */ jsxs(CardHeader, { children: [
          /* @__PURE__ */ jsx(CardTitle, { children: "Interactive Colors" }),
          /* @__PURE__ */ jsx(CardDescription, { children: "Buttons, links, and interactive elements" })
        ] }),
        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Accent",
              description: "Accent color for highlights",
              cssVar: "--accent",
              copyValue: "var(--accent)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Accent Foreground",
              description: "Text on accent background",
              cssVar: "--accent-foreground",
              copyValue: "var(--accent-foreground)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Muted",
              description: "Subtle background color",
              cssVar: "--muted",
              copyValue: "var(--muted)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Muted Foreground",
              description: "Subtle text color",
              cssVar: "--muted-foreground",
              copyValue: "var(--muted-foreground)"
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ jsxs(Card, { children: [
        /* @__PURE__ */ jsxs(CardHeader, { children: [
          /* @__PURE__ */ jsx(CardTitle, { children: "Status Colors" }),
          /* @__PURE__ */ jsx(CardDescription, { children: "Error, warning, and status indicators" })
        ] }),
        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Destructive",
              description: "Error and danger states",
              cssVar: "--destructive",
              copyValue: "var(--destructive)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Destructive Foreground",
              description: "Text on destructive background",
              cssVar: "--destructive-foreground",
              copyValue: "var(--destructive-foreground)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Border",
              description: "Border color",
              cssVar: "--border",
              copyValue: "var(--border)"
            }
          ),
          /* @__PURE__ */ jsx(
            ColorSwatch,
            {
              name: "Input",
              description: "Input border color",
              cssVar: "--input",
              copyValue: "var(--input)"
            }
          )
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Typography" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Font families, sizes, and text styles" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { className: "space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold", children: "Heading 1" }),
          /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "text-4xl font-bold" })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold", children: "Heading 2" }),
          /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "text-3xl font-bold" })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold", children: "Heading 3" }),
          /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "text-2xl font-bold" })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h4", { className: "text-xl font-semibold", children: "Heading 4" }),
          /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "text-xl font-semibold" })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("p", { className: "text-base", children: "Body text - This is the default body text style used throughout the application." }),
          /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "text-base" })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Small text - Used for captions, help text, and secondary information." }),
          /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "text-sm text-muted-foreground" })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("code", { className: "text-xs bg-muted px-2 py-1 rounded", children: "Code text - Monospace font for code snippets" }),
          /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground block mt-1", children: "text-xs bg-muted px-2 py-1 rounded" })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Border Radius" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Border radius tokens and examples" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-primary mx-auto rounded-none mb-2" }),
          /* @__PURE__ */ jsx("code", { className: "text-xs", children: "rounded-none" })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-primary mx-auto rounded-sm mb-2" }),
          /* @__PURE__ */ jsx("code", { className: "text-xs", children: "rounded-sm" })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-primary mx-auto rounded mb-2" }),
          /* @__PURE__ */ jsx("code", { className: "text-xs", children: "rounded" })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-primary mx-auto rounded-lg mb-2" }),
          /* @__PURE__ */ jsx("code", { className: "text-xs", children: "rounded-lg" })
        ] })
      ] }) })
    ] })
  ] });
}
function ColorSwatch({ name, description, cssVar, copyValue }) {
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 border rounded-lg", children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        className: "w-10 h-10 rounded-md border",
        style: { backgroundColor: `var(${cssVar})` }
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
      /* @__PURE__ */ jsx("div", { className: "font-medium", children: name }),
      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: description }),
      /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: cssVar })
    ] }),
    /* @__PURE__ */ jsx(
      Button,
      {
        variant: "ghost",
        size: "sm",
        onClick: () => navigator.clipboard.writeText(copyValue),
        className: "h-8 w-8 p-0",
        children: /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
      }
    )
  ] });
}
export {
  ThemePreview
};
