import { HeaderGeneral } from './HeaderGeneral';

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

export const Default = {
  render: () => (
    <HeaderGeneral
      logoText="HEXA"
      suiteText="Suite"
      languages={[
        { code: 'es-AR', name: 'Español' },
        { code: 'en', name: 'English' },
      ]}
      currentLanguageCode="es-AR"
      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
      onLogoClick={() => {
        console.log('Logo clickeado!');
        alert('Logo HEXA clickeado');
      }}
    />
  ),
};

export const ConIdiomaIngles = {
  render: () => (
    <HeaderGeneral
      logoText="HEXA"
      suiteText="Suite"
      languages={[
        { code: 'es-AR', name: 'Español' },
        { code: 'en', name: 'English' },
      ]}
      currentLanguageCode="en"
      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
    />
  ),
};

export const ConTextosPersonalizados = {
  render: () => (
    <HeaderGeneral
      logoText="MI"
      suiteText="EMPRESA"
      languages={[
        { code: 'es-AR', name: 'Español' },
        { code: 'en', name: 'English' },
        { code: 'pt', name: 'Português' },
      ]}
      currentLanguageCode="es-AR"
      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
    />
  ),
};

export const SinIdiomas = {
  render: () => (
    <HeaderGeneral
      logoText="HEXA"
      suiteText="Suite"
      languages={[]}
    />
  ),
};

export const Login = {
  render: () => (
    <HeaderGeneral
      variant="login"
      logoText="HEXA"
      suiteText="Suite"
      languages={[
        { code: 'es-AR', name: 'Español' },
        { code: 'en', name: 'English' },
      ]}
      currentLanguageCode="es-AR"
      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
      onLogoClick={() => {
        console.log('Logo clickeado!');
        alert('Logo HEXA clickeado');
      }}
    />
  ),
};

export const LoginConMargenCustom = {
  render: () => (
    <div style={{ '--mf-ds-grid-margin': '32px' }}>
      <HeaderGeneral
        variant="login"
        logoText="HEXA"
        suiteText="Suite"
        languages={[
          { code: 'es-AR', name: 'Español' },
          { code: 'en', name: 'English' },
        ]}
        currentLanguageCode="en"
        onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
      />
    </div>
  ),
};

