import { CardsPersonas } from './CardsPersonas';
 
const itemsEjemplo = [
  {
    id: '1',
    nombreComercial: 'Juan Pérez',
    actividad: 'Analista',
    estado: 'Activa',
  },
  {
    id: '2',
    nombreComercial: 'María Gómez',
    actividad: 'Operaciones',
    estado: 'Archivada',
  },
  {
    id: '3',
    nombreComercial: 'Carlos López',
    actividad: 'Tecnología',
    estado: 'Archivada',
  },
];
 
export default {
  title: 'Layout/CardsPersonas',
  component: CardsPersonas,
  tags: ['autodocs'],
  argTypes: {
    items: { control: 'object', description: 'Array de personas para renderizar en cards (base clonada)' },
    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' },
    viewActionText: { control: 'text', description: 'Etiqueta del botón Ver (outline)' },
    onViewClick: {
      action: 'viewClick',
      description: 'Consumidor: (item, index, event) — navegación, modal, etc. ListaPersonas reenvía el mismo contrato.',
    },
    showViewCardButton: { control: 'boolean', description: 'Muestra u oculta Ver en cada card' },
  },
};
 
export const Default = {
  args: {
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    viewActionText: 'Ver',
  },
};
 
export const ListaVacia = {
  args: {
    items: [],
    emptyMessage: 'No hay personas cargadas.',
  },
};
 
export const Skeleton = {
  args: {
    items: [],
    loading: true,
  },
};
