import { CardsEmpresas } from './CardsEmpresas';

const itemsEjemplo = [
  {
    id: '1',
    nombreComercial: 'Nucleus S.A.',
    actividad: 'Servicios financieros',
    estado: 'Activa',
  },
  {
    id: '2',
    nombreComercial: 'Acme Corp',
    actividad: 'Tecnología',
    estado: 'Borrador',
  },
  {
    id: '3',
    nombreComercial: 'TechStart',
    actividad: 'Innovación',
    estado: 'Inactiva',
  },
];

export default {
  title: 'Layout/CardsEmpresas',
  component: CardsEmpresas,
  tags: ['autodocs'],
  argTypes: {
    items: { control: 'object', description: 'Array de empresas para renderizar en cards' },
    loading: { control: 'boolean', description: 'Si true, muestra el skeleton de carga (Card general)' },
    actionButtonText: { control: 'text', description: 'Texto del botón por card' },
    emptyMessage: { control: 'text', description: 'Mensaje cuando no hay cards' },
    onItemClick: { action: 'itemClick', description: 'Callback al hacer click en una card' },
    onActionClick: { action: 'actionClick', description: 'Callback del botón de acción de la card' },
  },
};

export const Default = {
  args: {
    items: itemsEjemplo,
    actionButtonText: 'Editar',
  },
};

export const ListaVacia = {
  args: {
    items: [],
    emptyMessage: 'No hay empresas cargadas.',
  },
};

export const Skeleton = {
  args: {
    items: [],
    loading: true,
  },
};
