import { HeaderCompartido } from './HeaderCompartido';

export default {
  title: 'Layout/HeaderCompartido',
  component: HeaderCompartido,
  tags: ['autodocs'],
};

export const Default = {
  render: () => (
    <HeaderCompartido
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      userName="Maria García Alonso"
      userAvatar="https://i.pravatar.cc/150?img=12"
      notificationCount={7}
      onSearch={(value) => console.log('Búsqueda:', value)}
      onNotificationClick={() => console.log('Notificaciones clickeadas')}
      onUserClick={() => console.log('Usuario clickeado')}
    />
  ),
};

export const SinNotificaciones = {
  render: () => (
    <HeaderCompartido
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      userName="Juan Pérez"
      userAvatar="https://i.pravatar.cc/150?img=33"
      notificationCount={0}
    />
  ),
};

export const ConNotificaciones = {
  render: () => (
    <HeaderCompartido
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      userName="Maria García Alonso"
      userAvatar="https://i.pravatar.cc/150?img=12"
      notificationCount={7}
      onSearch={(value) => console.log('Búsqueda:', value)}
      onNotificationClick={() => console.log('Notificaciones clickeadas')}
      onUserClick={() => console.log('Usuario clickeado')}
    />
  ),
};

export const ConMuchasNotificaciones = {
  render: () => (
    <HeaderCompartido
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      userName="Ana Martínez"
      userAvatar="https://i.pravatar.cc/150?img=47"
      notificationCount={15}
    />
  ),
};

export const SinUsuario = {
  render: () => (
    <HeaderCompartido
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      notificationCount={3}
    />
  ),
};
