import { useState } from 'react';
import { Modal } from './Modal';
import { Button } from '../../Atoms/Button/Button';

export default {
  title: 'Layout/Modal',
  component: Modal,
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: 'select',
      options: ['small', 'medium', 'large', 'xl', 'full'],
    },
  },
};

export const Default = {
  render: () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>Abrir Modal</Button>
        <Modal
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          title="Título del Modal"
        >
          <p>Este es el contenido del modal. Puedes agregar cualquier contenido aquí.</p>
        </Modal>
      </>
    );
  },
};

export const WithFooter = {
  render: () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>Abrir Modal con Footer</Button>
        <Modal
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          title="Modal con Footer"
          footer={
            <div className="flex justify-end space-x-2">
              <Button variant="outline" onClick={() => setIsOpen(false)}>
                Cancelar
              </Button>
              <Button variant="primary" onClick={() => setIsOpen(false)}>
                Guardar
              </Button>
            </div>
          }
        >
          <p>Este modal tiene un footer con botones de acción.</p>
        </Modal>
      </>
    );
  },
};

export const Large = {
  render: () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>Abrir Modal Grande</Button>
        <Modal
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          title="Modal Grande"
          size="large"
        >
          <p>Este es un modal de tamaño grande con más espacio para contenido.</p>
        </Modal>
      </>
    );
  },
};

export const WithoutTitle = {
  render: () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>Abrir Modal sin Título</Button>
        <Modal
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
        >
          <p>Este modal no tiene título.</p>
        </Modal>
      </>
    );
  },
};

