"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Moon, Sun, Check } from "@phosphor-icons/react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
export function ThemeToggle() {
    const { theme, setTheme } = useTheme();
    const [mounted, setMounted] = React.useState(false);
    // Avoid hydration mismatch
    React.useEffect(()=>{
        setMounted(true);
    }, []);
    return /*#__PURE__*/ _jsxs(DropdownMenu, {
        children: [
            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
                asChild: true,
                children: /*#__PURE__*/ _jsxs(Button, {
                    variant: "ghost",
                    size: "icon",
                    className: "h-9 w-9",
                    children: [
                        /*#__PURE__*/ _jsx(Sun, {
                            className: "h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
                        }),
                        /*#__PURE__*/ _jsx(Moon, {
                            className: "absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
                        }),
                        /*#__PURE__*/ _jsx("span", {
                            className: "sr-only",
                            children: "Toggle theme"
                        })
                    ]
                })
            }),
            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
                align: "end",
                className: "min-w-[140px]",
                children: [
                    /*#__PURE__*/ _jsxs(DropdownMenuItem, {
                        onClick: ()=>setTheme("light"),
                        className: cn("flex items-center justify-between gap-2", mounted && theme === "light" && "bg-accent"),
                        children: [
                            /*#__PURE__*/ _jsxs("div", {
                                className: "flex items-center gap-2",
                                children: [
                                    /*#__PURE__*/ _jsx(Sun, {
                                        className: "h-4 w-4"
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        children: "Light"
                                    })
                                ]
                            }),
                            mounted && theme === "light" && /*#__PURE__*/ _jsx(Check, {
                                className: "h-4 w-4"
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs(DropdownMenuItem, {
                        onClick: ()=>setTheme("dark"),
                        className: cn("flex items-center justify-between gap-2", mounted && theme === "dark" && "bg-accent"),
                        children: [
                            /*#__PURE__*/ _jsxs("div", {
                                className: "flex items-center gap-2",
                                children: [
                                    /*#__PURE__*/ _jsx(Moon, {
                                        className: "h-4 w-4"
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        children: "Dark"
                                    })
                                ]
                            }),
                            mounted && theme === "dark" && /*#__PURE__*/ _jsx(Check, {
                                className: "h-4 w-4"
                            })
                        ]
                    })
                ]
            })
        ]
    });
}
