import React from 'react'
import { Meta } from '@storybook/react/types-6-0'
import { Story } from '@storybook/react'
import { ModalProps,Modal } from './Modal'
import styled from 'styled-components'
import { useArgs } from '@storybook/client-api'

export default {
  title:'Components/Modal',
  component: Modal,
  argTypes: {}
} as Meta

const Template: Story<ModalProps> = (args) => {
  const [{ show },updateArgs] = useArgs()
    
  return (
    <>
      <Button onClick={() => updateArgs({ show: !show })}>open</Button>
      <Modal {...args} setShow={() => updateArgs({ show: !show })} >
        <TitleClose>
          <TitleCloseButton onClick={() => updateArgs({ show: !show })}>X</TitleCloseButton>
        </TitleClose>
        <span>Are you sure you want to continue?</span>
      </Modal> 
    </>
  )
}

export const Basic = Template.bind({})
Basic.args = { show:false }

const Button = styled.button`
    font-size: 1rem;
  color: white;
  background-color: #228be6;
  font-weight: 400;
  border: none;
  width: 80px;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
`

const TitleClose = styled.div`
  display: flex;
  justify-content: flex-end;
`

const TitleCloseButton = styled.button`
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
`
