import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Card, Button, Input, ThemeSwitcher, useTheme } from "../index";
const ThemePreview = () => {
    const { theme } = useTheme();
    return (_jsxs(Card, { title: "Vista previa del tema actual", subtitle: `Tema activo: ${theme.name}`, className: "space-y-4", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los componentes de Flysoft usan autom\u00E1ticamente las variables del tema activo. Cambia el tema con el ThemeSwitcher para ver los estilos actualizados." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", icon: "fa-moon", children: "Acci\u00F3n primaria" }), _jsx(Button, { variant: "outline", icon: "fa-sun", children: "Acci\u00F3n secundaria" }), _jsx(Button, { variant: "ghost", icon: "fa-adjust", children: "Acci\u00F3n fantasma" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Correo", type: "email", placeholder: "correo@empresa.com", icon: "fa-envelope" })] })] }));
};
const ThemeSwitcherDocs = () => {
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "ThemeSwitcher - Gu\u00EDa y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsx("p", { className: "text-sm mb-6", style: { color: "var(--flysoft-text-secondary)" }, children: "ThemeSwitcher permite alternar entre los temas configurados en la librer\u00EDa. Se integra autom\u00E1ticamente con `ThemeProvider` y aplica los cambios a todos los componentes sin recargar la p\u00E1gina." }), _jsx(Card, { title: "Switcher integrado", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ThemeSwitcher, {}), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Este ejemplo usa el ThemeSwitcher directamente, ideal para colocarlo en headers o barras laterales." })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Vista previa de tema" }), _jsx(ThemePreview, {})] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Integraci\u00F3n en layouts" }), _jsx(Card, { title: "Recomendaciones", subtitle: "Buenas pr\u00E1cticas para colocar ThemeSwitcher", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", children: [_jsx("li", { children: "Ub\u00EDcalo en lugares visibles como el header o el men\u00FA lateral." }), _jsx("li", { children: "Combina el ThemeSwitcher con informaci\u00F3n del tema actual para mejorar la experiencia del usuario." }), _jsx("li", { children: "Recuerda envolver tu aplicaci\u00F3n con `ThemeProvider` y aplicar los estilos globales con `useGlobalThemeStyles` cuando sea necesario." })] }) })] })] }) }) }));
};
export default ThemeSwitcherDocs;
