import Modal from "../components/ui/modal/modal.jsx";
import Button from "../components/ui/button/button.jsx";
import { useState } from "react";

export default {
    title: 'UI/Modal',
    component: Modal,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
        open: {
            control: 'boolean',
            description: 'Variable qui gère si la modal est ouverte ou fermée.',
        },
        children: {
            control: Object,
            description: 'Contenu de la modal.',
        },
        title: {
            control: 'text',
            description: 'Titre de la modal',
        },
        onClose: {
            action: 'changed',
            description: 'Fonction appelée pour fermer la modal.',
        },
    },
};

const Template = (args) => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div>
            <Button onClick={() => setIsOpen(true)}>Ouvrir</Button>
            <Modal {...args} open={isOpen} onClose={() => setIsOpen(false)}>
                {args.children}
            </Modal>
        </div>
    );
};

export const Default = Template.bind({});
Default.args = {
    title: "Hello",
    children: <p>Lorem Ipsum...</p>,
};