import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { useTheme } from "../contexts/ThemeContext";
import { Button } from "./form-controls/Button";
import { Card } from "./layout/Card";
export const ThemeSwitcher = () => {
    const { theme, setTheme, currentThemeName, availableThemes, resetToDefault, isDark, } = useTheme();
    return (_jsxs(Card, { className: "p-6 max-w-md mx-auto", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Theme Switcher" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: availableThemes.map((themeName) => (_jsx(Button, { variant: currentThemeName === themeName ? "primary" : "ghost", size: "sm", onClick: () => setTheme(themeName), children: themeName }, themeName))) }), _jsx(Button, { variant: "outline", size: "sm", onClick: resetToDefault, className: "w-full", children: "Reset to Default" }), _jsxs("div", { className: "text-sm space-y-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("p", { children: [_jsx("strong", { children: "Current Theme:" }), " ", currentThemeName] }), _jsxs("p", { children: [_jsx("strong", { children: "Mode:" }), " ", isDark ? "Dark" : "Light"] }), _jsxs("p", { children: [_jsx("strong", { children: "Primary Color:" }), " ", theme.colors.primary] })] }), _jsx("div", { className: "w-full h-8 rounded border-2", style: {
                            backgroundColor: theme.colors.primary,
                            borderColor: theme.colors.borderDefault,
                        } })] })] }));
};
