import React from "react"
import Button from "@atoms/Button/Button"
import Canvas from "@/organisms/OffCanvas/OffCanvas"
import { CanvasProps } from "@/organisms/OffCanvas/OffCanvas"
import { Meta, StoryFn } from "@storybook/react-webpack5"
import { useState } from "storybook/preview-api"

export default {
    title: "organisms/OffCanvas",
    component: Canvas,
    argTypes: {},
} as Meta

const Template: StoryFn<CanvasProps> = (args) => {
    const [show, setShow] = useState<boolean>(args.show)

    const handleClose = () => setShow(false)
    const handleShow = () => setShow(true)

    return (
        <>
            <Button variant="primary" onClick={handleShow}>
                Open
            </Button>
            <Canvas {...args} show={show} onHide={handleClose}>
                Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images,
                lists, etc.
            </Canvas>
        </>
    )
}

export const _Canvas = Template.bind({})
_Canvas.args = {
    title: "Offcanvas",
    show: true,
}