import { IdentidadVisual } from './IdentidadVisual';

export default {
  title: 'Layout/IdentidadVisual',
  component: IdentidadVisual,
  tags: ['autodocs'],
  argTypes: {
    isNarrow: {
      control: 'boolean',
      description: 'Vista narrow (logo pequeño + formato en columna) vs desktop (card marca + área formato)',
    },
    identidadVisualTitle: {
      control: 'text',
      description: 'Título de la sección (ej. Identidad visual)',
    },
    marcaActualTitle: {
      control: 'text',
      description: 'Título junto al logo (ej. Marca actual)',
    },
    marcaActualImage: {
      control: 'text',
      description: 'URL de la imagen del logo (vacío = mostrar iniciales)',
    },
    marcaActualImageAlt: {
      control: 'text',
      description: 'Alt de la imagen del logo',
    },
    marcaActualNucleusText: {
      control: 'text',
      description: 'Texto/iniciales cuando no hay imagen',
    },
    formatoText: {
      control: 'text',
      description: 'Requisitos de formato (soporta \\n para salto de línea)',
    },
    uploadButtonText: {
      control: 'text',
      description: 'Texto del botón de subir imagen',
    },
    uploadButtonOnClick: {
      action: 'uploadButtonClicked',
      description: 'Callback al hacer click en Subir imagen',
    },
  },
};

export const Default = {
  args: {
    isNarrow: false,
    identidadVisualTitle: 'Identidad visual',
    marcaActualTitle: 'Marca actual',
    marcaActualNucleusText: 'N',
    formatoText: 'Formato cuadrado\nPNG de máximo 2Mb',
    uploadButtonText: 'Subir imagen',
    uploadButtonOnClick: () => alert('Subir imagen'),
  },
};

export const Narrow = {
  args: {
    isNarrow: true,
    identidadVisualTitle: 'Identidad visual',
    marcaActualTitle: 'Marca actual',
    marcaActualNucleusText: 'NT',
    formatoText: 'Formato cuadrado\nPNG de máximo 2Mb',
    uploadButtonText: 'Subir imagen',
    uploadButtonOnClick: () => alert('Subir imagen'),
  },
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (Story) => (
      <div style={{ maxWidth: 400 }}>
        <Story />
      </div>
    ),
  ],
};

export const ConImagen = {
  args: {
    isNarrow: false,
    identidadVisualTitle: 'Identidad visual',
    marcaActualTitle: 'Marca actual',
    marcaActualImage: 'https://via.placeholder.com/72',
    marcaActualImageAlt: 'Logo del tenant',
    formatoText: 'Formato cuadrado\nPNG de máximo 2Mb',
    uploadButtonText: 'Subir imagen',
    uploadButtonOnClick: () => alert('Subir imagen'),
  },
};

export const SinTitulo = {
  args: {
    isNarrow: false,
    identidadVisualTitle: '',
    marcaActualTitle: 'Marca actual',
    marcaActualNucleusText: 'AB',
    formatoText: 'Formato cuadrado\nPNG de máximo 2Mb',
    uploadButtonText: 'Subir imagen',
    uploadButtonOnClick: () => alert('Subir imagen'),
  },
};
