import { useState } from 'react';

import { StoryObj, Meta } from '@storybook/react';

import { Button, Modal } from '@/components';

const meta: Meta<typeof Modal> = {
  component: Modal,
};

export default meta;

type TStory = StoryObj<typeof Modal>;

export const Primary: TStory = {
  args: {
    isShown: true,
    setIsShown: () => {},
    children: (
      <Modal.Content className="bg-white p-40">
        <h2 className="h2-ui">Hi, I&apos;m a Modal Window!</h2>
      </Modal.Content>
    ),
  },
};

export function ModalComponent() {
  const [isShown, setIsShown] = useState(false);

  return (
    <>
      <Button shape="default" size="md" color={'black'} onClick={() => setIsShown(true)}>
        Open modal
      </Button>

      <Modal isShown={isShown} setIsShown={() => setIsShown(false)}>
        <Modal.Content className="bg-white p-40">
          <h2 className="h2-ui">Hi, I&apos;m a Modal Window!</h2>
        </Modal.Content>
      </Modal>
    </>
  );
}