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

export default {
  title: 'Layout/Drawer',
  component: Drawer,
  tags: ['autodocs'],
  argTypes: {
    position: {
      control: 'select',
      options: ['left', 'right', 'top', 'bottom'],
    },
    size: {
      control: 'select',
      options: ['small', 'medium', 'large', 'full'],
    },
  },
};

export const Right = {
  render: () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>Abrir Drawer Derecha</Button>
        <Drawer
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          title="Drawer desde la Derecha"
          position="right"
        >
          <p>Este es el contenido del drawer que se abre desde la derecha.</p>
        </Drawer>
      </>
    );
  },
};

export const Left = {
  render: () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>Abrir Drawer Izquierda</Button>
        <Drawer
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          title="Drawer desde la Izquierda"
          position="left"
        >
          <p>Este es el contenido del drawer que se abre desde la izquierda.</p>
        </Drawer>
      </>
    );
  },
};

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

