import { TareasPendientesPoint } from './TareasPendientesPoint';

export default {
  title: 'Layout/TareasPendientesPoint',
  component: TareasPendientesPoint,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (Story) => (
      <div style={{ width: '100%', maxWidth: 542, minWidth: 0 }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
    title: { control: 'text' },
    pendingCount: { control: { type: 'number', min: 0, max: 99 } },
    statusTemplate: { control: 'text' },
    buttonText: { control: 'text' },
    onViewTasksClick: { action: 'viewTasksClick' },
    onStatusClick: { action: 'statusClick' },
    viewTasksHref: { control: 'text' },
    viewTasksTo: { control: 'text' },
    linkComponent: { control: false },
    disabled: { control: 'boolean' },
  },
};

export const Default = {
  args: {
    pendingCount: 2,
    onViewTasksClick: () => {},
  },
};

export const SinTareas = {
  args: {
    pendingCount: 0,
    statusTemplate: 'No tienes tareas pendientes',
    buttonText: 'Ver mis tareas',
  },
};

export const ConNavegacion = {
  args: {
    pendingCount: 5,
    viewTasksHref: '/tareas',
    statusHref: '/tareas',
  },
};

export const EnColumna = {
  parameters: {
    docs: {
      description: {
        story: 'Simula uso en grilla de columnas del consumidor (100% del ancho de la columna).',
      },
    },
  },
  decorators: [
    (Story) => (
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: 16,
          width: '100%',
        }}
      >
        <Story />
        <div
          style={{
            borderRadius: 14,
            border: '1px dashed #C4C4C4',
            minHeight: 204,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: '#6B7280',
            fontSize: 14,
          }}
        >
          Otra columna
        </div>
      </div>
    ),
  ],
  args: {
    pendingCount: 2,
  },
};
