import { HeaderPoint } from './HeaderPoint';

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

export const Default = {
  render: () => (
    <HeaderPoint
      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: () => (
    <HeaderPoint
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      userName="Juan Pérez"
      userAvatar="https://i.pravatar.cc/150?img=33"
      notificationCount={0}
    />
  ),
};

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

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

export const MobileConMenuYHeaderImageClient = {
  parameters: {
    viewport: {
      defaultViewport: 'mobile1',
    },
  },
  render: () => (
    <div style={{ minHeight: '100vh', background: 'var(--color-main)' }}>
      <HeaderPoint
        userName="Maria Garcia Alonso"
        userAvatar="https://i.pravatar.cc/150?img=12"
        notificationCount={4}
        headerImageClient="https://nucleus-teams.atlassian.net/s/150dpd/b/0/fd088157203ba66d5d1bd198b37e1cc3/_/jira-logo-scaled.png"
        sidebarSections={[
          {
            title: 'PERSONAS',
            items: [
              { id: 'empleados', label: 'Empleados', icon: 'UserGroupIcon' },
              { id: 'organizacion', label: 'Organizacion', icon: 'BuildingOfficeIcon' },
            ],
          },
          {
            title: 'TALENTO',
            items: [
              { id: 'reclutamiento', label: 'Reclutamiento', icon: 'UserPlusIcon' },
              { id: 'desarrollo', label: 'Desarrollo', icon: 'AcademicCapIcon' },
            ],
          },
        ]}
        sidebarActiveItem="inicio"
        sidebarItemBadges={{ inicio: 2, empleados: 5 }}
        onSidebarItemClick={(item) => console.log('Sidebar item:', item)}
      />
      <p style={{ color: '#fff', fontSize: '12px', margin: '12px 8px' }}>
        Toca el icono hamburguesa para ver el menu lateral con headerImageClient.
      </p>
    </div>
  ),
};
