import { useState } from 'react';
import { HeaderConBuscador } from './HeaderConBuscador';

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

export const Default = {
  render: () => {
    const [searchValue, setSearchValue] = useState('');
    return (
      <HeaderConBuscador
        searchPlaceholder="Buscar empleados, reportes, configuraciones..."
        userName="Maria Garcia Alonso"
        userAvatar="https://i.pravatar.cc/150?img=47"
        notificationCount={2}
        onSearch={(value) => {
          setSearchValue(value);
          console.log('Buscando:', value);
        }}
        onNotificationClick={() => {
          console.log('Notificaciones clickeadas');
        }}
        onUserClick={() => {
          console.log('Perfil clickeado');
        }}
      />
    );
  },
};

export const SinNotificaciones = {
  render: () => (
    <HeaderConBuscador
      userName="Juan Pérez"
      notificationCount={0}
    />
  ),
};

export const SinNotificacionesProp = {
  render: () => (
    <HeaderConBuscador
      userName="Ana López"
    />
  ),
};

export const ConMuchasNotificaciones = {
  render: () => (
    <HeaderConBuscador
      userName="Carlos Rodríguez"
      notificationCount={15}
    />
  ),
};

export const SinAvatar = {
  render: () => (
    <HeaderConBuscador
      userName="Laura Martínez"
      notificationCount={3}
    />
  ),
};

export const CustomSearchPlaceholder = {
  render: () => (
    <HeaderConBuscador
      searchPlaceholder="Buscar en el sistema..."
      userName="Pedro Sánchez"
      notificationCount={1}
    />
  ),
};











