import type { ReactNode } from 'react';
import type { DropdownItemProps } from '../Dropdown/Dropdown.types';
import type { ButtonProps } from '../Button/Button.types';
/**
 * Variante de dispositivo del Navbar
 * - `responsive`: Se adapta automáticamente al viewport (por defecto)
 * - `desktop`: Versión completa (≥1024px) con todos los elementos
 * - `tablet`: Versión tablet (≥768px) con elementos reducidos
 * - `mobile`: Versión simplificada (<768px) con logo icono y avatar circular
 *
 * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4278-18626
 */
export type NavbarVariant = 'responsive' | 'desktop' | 'tablet' | 'mobile';
/**
 * Datos del dropdown de usuario
 *
 * @example
 * ```tsx
 * const userDropdown: UserDropdownProps = {
 *   avatar: '/path/to/avatar.jpg',
 *   name: 'Juan Pérez',
 *   email: 'juan@ejemplo.com',
 *   menuItems: [
 *     { children: 'Account', icon: <UserIcon />, onClick: () => {} },
 *     { children: 'Settings', icon: <CogIcon />, onClick: () => {} },
 *     { isDivider: true },
 *     { children: 'Sign Out', onClick: () => {} },
 *   ],
 * };
 * ```
 */
export interface UserDropdownProps {
    /**
     * URL del avatar del usuario
     * Recomendado: mínimo 80x80px para retina
     */
    avatar: string;
    /**
     * Nombre del usuario (se muestra en desktop/tablet)
     */
    name: string;
    /**
     * Email del usuario (se muestra en desktop/tablet)
     */
    email?: string;
    /**
     * Rol del usuario (alternativa a email, ej: "Administrador")
     */
    role?: string;
    /**
     * Items del menú dropdown de usuario
     * Si no se proporciona, se usa un menú por defecto con Account, Notifications, Billing, Dark mode y Sign Out
     */
    menuItems?: DropdownItemProps[];
    /**
     * Handler para click en el dropdown de usuario
     * @deprecated Usar menuItems con onClick individuales en su lugar
     */
    onMenuClick?: () => void;
    /**
     * Handler para la opción "Account" del menú por defecto
     */
    onAccountClick?: () => void;
    /**
     * Handler para la opción "Notifications" del menú por defecto
     */
    onNotificationsClick?: () => void;
    /**
     * Handler para la opción "Billing" del menú por defecto
     */
    onBillingClick?: () => void;
    /**
     * Handler para la opción "Dark mode" del menú por defecto
     */
    onDarkModeClick?: () => void;
    /**
     * Handler para la opción "Sign Out" del menú por defecto
     */
    onSignOutClick?: () => void;
}
/**
 * Configuración de badges de notificación
 *
 * @example
 * ```tsx
 * const notifications: NotificationsProps = {
 *   cart: 15,      // Muestra badge con "15"
 *   bell: true,    // Muestra dot de notificación
 * };
 * ```
 */
export interface NotificationsProps {
    /**
     * Número de items en el carrito
     * Si es > 99, muestra "+99"
     */
    cart?: number;
    /**
     * Muestra dot de notificación en la campana
     */
    bell?: boolean;
}
/**
 * Descriptor de un microfrontend para el menú de aplicaciones
 */
export interface MicrofrontendDescriptor {
    /**
     * Nombre del microfrontend (se mostrará en el label)
     */
    name: string;
    /**
     * URL base del microfrontend (ej: "/inventory")
     */
    baseUrl: string;
    /**
     * Icono opcional para el menú
     */
    icon?: ReactNode;
}
/**
 * Props del componente Navbar
 *
 * Barra de navegación principal con soporte completo para responsive design y dark mode.
 * Incluye logo, nombre de producto, badge de ambiente, botones de acción y dropdown de usuario.
 *
 * **Mejores prácticas implementadas:**
 * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
 * - Dark mode con estrategia 'class' (darkMode: 'class')
 * - Tokens de color consistentes con la documentación
 * - Focus rings adaptativos para light y dark mode
 * - Tipografía del sistema: Heading/Tiny (20px Bold), Paragraph/Small (14px), Paragraph/Tiny (12px)
 * - Spacing del sistema: 4px, 8px, 12px, 16px, 32px
 *
 * @see docs/colors.md - Sistema de colores y tokens dark mode
 * @see docs/typography.md - Sistema tipográfico (Heading, Paragraph)
 * @see docs/spacing.md - Sistema de espaciado
 * @see docs/shadows.md - Sistema de sombras (button-inset)
 */
export interface NavbarProps {
    /**
     * Indica si el Navbar se usa en contexto de AppShell
     * Habilita el menú de aplicaciones y el breadcrumb dinámico
     *
     * @default false
     */
    isAppShell?: boolean;
    /**
     * Lista de microfrontends disponibles en el menú de aplicaciones
     * Solo visible si isAppShell es true
     */
    microfrontends?: MicrofrontendDescriptor[];
    /**
     * Handler para personalizar la navegación al seleccionar un microfrontend
     * Si no se proporciona, por defecto hace window.location.href = mfe.baseUrl
     */
    onMicrofrontendClick?: (mfe: MicrofrontendDescriptor) => void;
    /**
     * Nombre del microfrontend activo inicialmente
     * Si se proporciona, se muestra en el label al cargar
     */
    activeMicrofrontendName?: string;
    /**
     * Logo del negocio/cliente (componente o imagen)
     * Solo visible en desktop/tablet
     *
     * @default Logo por defecto de la carpeta public
     */
    logo?: ReactNode;
    /**
     * Logo del negocio/cliente para modo oscuro
     * Si se proporciona, se alternará automáticamente con 'logo' según el tema activo.
     * Solo visible en desktop/tablet
     */
    darkLogo?: ReactNode;
    /**
     * Logo de Siesa personalizado
     * Si no se proporciona, usa el logo por defecto según variante
     *
     * @default Logo Siesa de la carpeta public
     */
    siesaLogo?: ReactNode;
    /**
     * Nombre del producto que aparece después del logo
     * Solo visible en desktop/tablet (se oculta en mobile)
     *
     * @default 'Nombre Producto'
     */
    productName?: string;
    /**
     * Badge de ambiente/entorno (ej: "Ambiente de Pruebas")
     * En mobile muestra versión corta ("Pruebas")
     */
    environmentBadge?: string;
    /**
     * Contenido del dropdown de usuario
     */
    userDropdown?: UserDropdownProps;
    /**
     * Elementos de acción adicionales en la barra (botones, iconos, etc.)
     * Se muestran a la derecha después del dropdown de usuario
     */
    actions?: ReactNode;
    /**
     * Configuración de badges de notificación para los botones
     */
    notifications?: NotificationsProps;
    /**
     * Clases CSS adicionales para el contenedor del navbar
     */
    className?: string;
    /**
     * Modo de visualización del navbar
     * - `responsive`: Se adapta automáticamente al viewport
     * - `desktop`: Versión completa (1360x64px)
     * - `tablet`: Versión tablet (1024x64px)
     * - `mobile`: Versión compacta (428x40px)
     *
     * @default 'responsive'
     */
    variant?: NavbarVariant;
    /**
     * Ocultar botones de acción (carrito, notificaciones, búsqueda)
     *
     * @default false
     */
    hideActionButtons?: boolean;
    /**
     * Mostrar el botón de navegación en el leading (lado izquierdo)
     * Solo visible en desktop/tablet
     *
     * @default false
     */
    showNavigationButton?: boolean;
    /**
     * Props adicionales para el botón de navegación
     * Permite personalizar el botón usando las props del componente Button
     */
    navigationButtonProps?: Partial<ButtonProps>;
    /**
     * Elemento leading personalizado (reemplaza el botón de navegación por defecto)
     * Solo visible en desktop/tablet
     */
    leadingAction?: ReactNode;
    /**
     * Mostrar Business Logo en el leading (lado izquierdo)
     * Solo visible en desktop/tablet
     *
     * @default false
     */
    showBusinessLogo?: boolean;
    /**
     * Mostrar Logo de Siesa en el leading (lado izquierdo)
     * Solo visible en desktop/tablet (en mobile siempre muestra el icono)
     *
     * @default true
     */
    showSiesaLogoLeading?: boolean;
    /**
     * Mostrar Logo de Siesa en el trailing (lado derecho)
     * Solo visible en desktop/tablet
     *
     * @default false
     */
    showSiesaLogoTrailing?: boolean;
    /**
     * Handler para click en el botón de navegación (flecha izquierda)
     * Solo visible en desktop/tablet cuando no hay leadingAction
     */
    onNavigationClick?: () => void;
    /**
     * Handler para click en el botón de búsqueda
     * Solo visible en mobile
     */
    onSearchClick?: () => void;
    /**
     * Handler para click en el botón de carrito
     */
    onCartClick?: () => void;
    /**
     * Handler para click en el botón de notificaciones
     */
    onNotificationsClick?: () => void;
    /**
     * Muestra el selector de idioma en el menú de usuario.
     * Si es true (por defecto), inserta el LanguageSelector con variante 'menu-item'.
     * También puede recibir un elemento React personalizado.
     *
     * @default true
     */
    languageSelector?: boolean | ReactNode;
    /**
     * Función de traducción personalizada (inyectada por el padre)
     */
    t?: (key: string, defaultValue?: string) => string;
}
//# sourceMappingURL=Navbar.types.d.ts.map