import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { Card, Menu, Badge } from "../index";
const MenuDocs = () => {
    const [selectedItem, setSelectedItem] = useState(null);
    // Opciones básicas
    const basicOptions = [
        { label: "Dashboard", id: "dashboard" },
        { label: "Configuración", id: "settings" },
        { label: "Perfil", id: "profile" },
        { label: "Ayuda", id: "help" },
    ];
    // Opciones con iconos
    const optionsWithIcons = [
        { label: "Editar", icon: "fa-edit", action: "edit" },
        { label: "Eliminar", icon: "fa-trash", action: "delete" },
        { label: "Compartir", icon: "fa-share", action: "share" },
    ];
    // Opciones complejas
    const userOptions = [
        { id: 1, name: "Juan Pérez", email: "juan@ejemplo.com", role: "Admin" },
        { id: 2, name: "María García", email: "maria@ejemplo.com", role: "User" },
    ];
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Menu - Lista de Opciones", 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: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Menu muestra una lista vertical de opciones. Es la versi\u00F3n est\u00E1tica y siempre visible del contenido de un DropdownMenu." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-start gap-8", children: [_jsx(Menu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item) }), selectedItem && (_jsxs("div", { className: "p-4 border rounded bg-[var(--color-bg-secondary)]", children: [_jsx("p", { className: "text-sm font-semibold", children: "Seleccionado:" }), _jsxs("p", { className: "text-sm", children: [selectedItem.label, " (", selectedItem.id, ")"] })] }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Personalizaci\u00F3n con renderOption" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes personalizar completamente c\u00F3mo se renderiza cada opci\u00F3n." }), _jsx("div", { className: "space-y-4", children: _jsx(Menu, { options: optionsWithIcons, onOptionSelected: (item) => console.log(item), renderOption: (item) => (_jsxs("div", { className: "flex items-center", children: [_jsx("i", { className: `fa ${item.icon} w-6` }), _jsx("span", { children: item.label })] })) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso de getOptionLabel" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Si tus objetos no tienen una propiedad `label`, puedes usar `getOptionLabel`." }), _jsx("div", { className: "space-y-4", children: _jsx(Menu, { options: userOptions, onOptionSelected: (item) => console.log(item), getOptionLabel: (item) => item.name, renderOption: (item) => (_jsxs("div", { className: "flex justify-between items-center w-full min-w-[200px]", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: item.name }), _jsx("div", { className: "text-xs text-[var(--flysoft-text-secondary)]", children: item.email })] }), _jsx(Badge, { variant: item.role === 'Admin' ? 'primary' : 'secondary', size: "sm", children: item.role })] })) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Personalizaci\u00F3n de Estilos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes usar la propiedad `className` para sobreescribir los estilos por defecto usando clases de Tailwind. Por ejemplo, puedes cambiar el color de fondo, quitar el borde o sombra, etc." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex gap-8 flex-wrap", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Fondo Oscuro" }), _jsx(Menu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item), className: "bg-gray-800 border-gray-700 text-white", itemClassName: "text-gray-200 hover:bg-gray-700 hover:text-white", renderOption: (item) => (_jsx("span", { children: item.label })) })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Sin Borde ni Sombra" }), _jsx(Menu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item), className: "border-0 shadow-none bg-blue-50" })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Estilo Destacado" }), _jsx(Menu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item), className: "bg-indigo-50 border-indigo-200 shadow-md", renderOption: (item) => (_jsx("span", { className: "text-indigo-800 font-medium", children: item.label })) })] })] }) })] })] }) }) }));
};
export default MenuDocs;
