import { TenantConfig } from './TenantConfig';

export default {
  title: 'Layout/TenantConfig',
  component: TenantConfig,
  tags: ['autodocs'],
  argTypes: {
    title: {
      control: 'text',
      description: 'Título del componente',
    },
    text: {
      control: 'text',
      description: 'Texto/descripción del componente',
    },
    iconName: {
      control: 'text',
      description: 'Nombre del icono (Heroicons)',
    },
    iconColor: {
      control: 'color',
      description: 'Color del icono',
    },
  },
};

export const Default = {
  args: {
    title: 'Configuración\nImpacto en el sistema',
    text: 'Aquí puedes configurar las opciones principales de tu tenant.',
    iconName: 'Cog6ToothIcon',
    iconColor: '#334681',
  },
};

export const SoloTitulo = {
  args: {
    title: 'Configuración\nImpacto en el sistema',
    text: '',
    iconName: 'Cog6ToothIcon',
  },
};

export const SoloTexto = {
  args: {
    title: '',
    text: 'Aquí puedes configurar las opciones principales de tu tenant.',
    iconName: 'Cog6ToothIcon',
  },
};

export const TextoLargo = {
  args: {
    title: 'Configuración\nImpacto en el sistema',
    text: 'Aquí puedes configurar las opciones principales de tu tenant. Este es un texto más largo para probar cómo se adapta el componente cuando el contenido es extenso y necesita más espacio vertical.',
    iconName: 'Cog6ToothIcon',
  },
};

export const Personalizado = {
  args: {
    title: 'Mi Configuración',
    text: 'Texto personalizado con diferentes estilos.',
    iconName: 'Cog6ToothIcon',
    iconColor: '#334681',
  },
};

