import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { Accordion, Card, Badge, Input } from "../index";
const AccordionDocs = () => {
    const [openAccordions, setOpenAccordions] = useState(new Set());
    const handleToggle = (id, isOpen) => {
        const newSet = new Set(openAccordions);
        if (isOpen) {
            newSet.add(id);
        }
        else {
            newSet.delete(id);
        }
        setOpenAccordions(newSet);
    };
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Accordion - Variantes 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: "Variantes" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Accordion soporta tres variantes visuales: default, elevated (con sombra) y outlined (con borde destacado)." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { variant: "default", title: "Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con variante por defecto." }) }), _jsx(Accordion, { variant: "elevated", title: "Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con sombra elevada." }) }), _jsx(Accordion, { variant: "outlined", title: "Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con borde destacado." }) })] })] }), _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: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Accordion permite mostrar contenido colapsable con una animaci\u00F3n suave de expandir/contraer. Haz clic en el header para abrir o cerrar el contenido." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Informaci\u00F3n General", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este es un accordion b\u00E1sico sin icono ni elementos adicionales. El contenido se muestra cuando el accordion est\u00E1 abierto y se oculta con una animaci\u00F3n suave cuando est\u00E1 cerrado." }) }), _jsx(Accordion, { title: "Detalles del Producto", defaultOpen: true, children: _jsxs("div", { className: "space-y-2", children: [_jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este accordion est\u00E1 abierto por defecto usando la propiedad", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "defaultOpen" }), "."] }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Caracter\u00EDstica 1: Descripci\u00F3n detallada" }), _jsx("li", { children: "Caracter\u00EDstica 2: M\u00E1s informaci\u00F3n" }), _jsx("li", { children: "Caracter\u00EDstica 3: Detalles adicionales" })] })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con icono" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes agregar un icono FontAwesome 5 del lado izquierdo del t\u00EDtulo usando la propiedad ", _jsx("code", { children: "icon" }), "."] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Configuraci\u00F3n", icon: "fa-cog", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion tiene un icono de configuraci\u00F3n en el lado izquierdo." }), _jsx(Input, { label: "Nombre", placeholder: "Ingresa un nombre" }), _jsx(Input, { label: "Email", type: "email", placeholder: "correo@ejemplo.com" })] }) }), _jsx(Accordion, { title: "Informaci\u00F3n de Usuario", icon: "fa-user", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con icono de usuario. Los iconos ayudan a identificar visualmente el tipo de contenido." }) }), _jsx(Accordion, { title: "Notificaciones", icon: "fa-bell", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con icono de notificaciones. Puedes usar cualquier icono de FontAwesome 5." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con rightNode" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La propiedad ", _jsx("code", { children: "rightNode" }), " permite agregar contenido personalizado del lado derecho, antes del chevron. \u00DAtil para badges, botones peque\u00F1os, contadores, etc."] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Mensajes", icon: "fa-envelope", rightNode: _jsx(Badge, { variant: "info", children: "3" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion muestra un badge con el n\u00FAmero de mensajes no le\u00EDdos en el lado derecho." }) }), _jsx(Accordion, { title: "Tareas Pendientes", icon: "fa-tasks", rightNode: _jsx(Badge, { variant: "warning", children: "5" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con badge de tareas pendientes. El rightNode puede contener cualquier ReactNode." }) }), _jsx(Accordion, { title: "Configuraci\u00F3n Avanzada", icon: "fa-sliders-h", rightNode: _jsxs("div", { className: "flex items-center gap-2 px-2 py-1 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] cursor-pointer rounded transition-colors", onClick: (e) => {
                                                e.stopPropagation();
                                                console.log("Editar configuración");
                                            }, children: [_jsx("i", { className: "fal fa-edit" }), _jsx("span", { children: "Editar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion incluye un elemento de acci\u00F3n en el rightNode, permitiendo acciones r\u00E1pidas sin abrir el accordion. Nota: No uses componentes Button dentro de rightNode ya que causar\u00EDa un error de anidaci\u00F3n de botones." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con callback onToggle" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La propiedad ", _jsx("code", { children: "onToggle" }), " permite ejecutar una funci\u00F3n cuando el accordion se abre o cierra. \u00DAtil para sincronizar estado externo o realizar acciones al cambiar el estado."] }), _jsxs("div", { className: "space-y-3", children: [openAccordions.size > 0 && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Accordions abiertos:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: Array.from(openAccordions).join(", ") || "Ninguno" })] }) })), _jsx(Accordion, { title: "Secci\u00F3n 1", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion1", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion notifica cuando se abre o cierra mediante el callback onToggle." }) }), _jsx(Accordion, { title: "Secci\u00F3n 2", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion2", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Otro accordion que tambi\u00E9n notifica su estado mediante onToggle." }) }), _jsx(Accordion, { title: "Secci\u00F3n 3", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion3", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Un tercer accordion para demostrar el seguimiento de m\u00FAltiples accordions." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo completo con m\u00FAltiples accordions" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo pr\u00E1ctico usando m\u00FAltiples accordions para organizar informaci\u00F3n en secciones colapsables." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Informaci\u00F3n Personal", icon: "fa-user-circle", rightNode: _jsx(Badge, { variant: "success", children: "Completo" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Juan", icon: "fa-user" }), _jsx(Input, { label: "Apellido", placeholder: "P\u00E9rez", icon: "fa-user" }), _jsx(Input, { label: "Fecha de Nacimiento", type: "date", icon: "fa-calendar" })] }) }), _jsx(Accordion, { title: "Informaci\u00F3n de Contacto", icon: "fa-address-book", rightNode: _jsx(Badge, { variant: "warning", children: "Pendiente" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Email", type: "email", placeholder: "juan@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) }), _jsx(Accordion, { title: "Configuraci\u00F3n de Seguridad", icon: "fa-shield-alt", rightNode: _jsx(Badge, { variant: "info", children: "Recomendado" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Contrase\u00F1a Actual", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "Nueva Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-key" })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background Personalizado" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente detecta autom\u00E1ticamente las clases de background (bg-*) desde la prop className y las aplica al background del accordion. Las dem\u00E1s clases se aplican normalmente al contenedor." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Accordion con bg-blue-50", className: "bg-blue-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con background personalizado usando clases de Tailwind." }) }), _jsx(Accordion, { title: "Accordion con bg-gradient", className: "bg-gradient-to-br from-purple-100 to-pink-100", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con gradiente personalizado." }) }), _jsx(Accordion, { title: "Accordion con bg y otras clases", className: "bg-green-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes combinar clases de background con otras clases de Tailwind." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Title como ReactNode" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El t\u00EDtulo puede ser un ReactNode, permitiendo incluir contenido personalizado como badges, iconos adicionales, o cualquier otro componente." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Proyecto Importante" }), _jsx(Badge, { variant: "danger", size: "sm", children: "Urgente" })] }), icon: "fa-project-diagram", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion tiene un t\u00EDtulo personalizado con un badge integrado." }) }), _jsx(Accordion, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-star text-yellow-500" }), _jsx("span", { children: "Favoritos" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "T\u00EDtulo personalizado con un icono de estrella integrado." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Animaci\u00F3n suave:" }), " El contenido se expande y contrae con una animaci\u00F3n CSS de 300ms."] }), _jsxs("li", { children: [_jsx("strong", { children: "Icono opcional:" }), " Soporta iconos FontAwesome 5 del lado izquierdo del t\u00EDtulo."] }), _jsxs("li", { children: [_jsx("strong", { children: "RightNode:" }), " Permite agregar contenido personalizado (badges, botones, etc.) del lado derecho antes del chevron."] }), _jsxs("li", { children: [_jsx("strong", { children: "Estado controlado:" }), " Soporta estado controlado mediante ", _jsx("code", { children: "defaultOpen" }), " y", " ", _jsx("code", { children: "onToggle" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Title flexible:" }), " El t\u00EDtulo puede ser un string o un ReactNode, permitiendo contenido personalizado."] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Incluye atributos ARIA para mejor accesibilidad."] }), _jsxs("li", { children: [_jsx("strong", { children: "Chevron din\u00E1mico:" }), " El chevron cambia autom\u00E1ticamente entre arriba (abierto) y abajo (cerrado)."] }), _jsxs("li", { children: [_jsx("strong", { children: "Variantes:" }), " Soporta tres variantes: default, elevated (con sombra) y outlined (con borde destacado)."] }), _jsxs("li", { children: [_jsx("strong", { children: "Background personalizado:" }), " El componente detecta autom\u00E1ticamente las clases de background (bg-*) y las aplica correctamente."] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Requerido" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "title" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "T\u00EDtulo del accordion. Puede ser un string o un ReactNode." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "children" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido que se muestra cuando el accordion est\u00E1 abierto." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "icon" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Clase de icono FontAwesome 5 (ej: \"fa-user\", \"fa-cog\") que se muestra del lado izquierdo del t\u00EDtulo." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "rightNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido personalizado que se muestra del lado derecho, antes del chevron. \u00DAtil para badges, botones, contadores, etc." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "defaultOpen" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "boolean" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Si es true, el accordion estar\u00E1 abierto por defecto. Por defecto es false." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "onToggle" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(isOpen: boolean) => void" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Callback que se ejecuta cuando el accordion se abre o cierra. Recibe un boolean indicando si est\u00E1 abierto (true) o cerrado (false)." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "variant" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"default\" | \"elevated\" | \"outlined\"" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Variante visual del accordion. Por defecto es \"default\"." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "className" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Clases CSS adicionales. Las clases de background (bg-*) se aplican autom\u00E1ticamente al background del accordion." })] })] })] }) })] })] }) }) }));
};
export default AccordionDocs;
