import React, { useState } from 'react'
import { Button } from '../button'
import { View } from '../view'
import { Overlay } from './Overlay.jsx'

export default {
  title: 'Design System/Base/Overlay',
  component: Overlay,
  render: () => {
    const [isOverlayOpen, setIsOverlayOpen] = useState(false)
    return (
      <>
        <Button type="button" onClick={() => setIsOverlayOpen(true)}>
          Open overlay
        </Button>
        <Overlay
          isVisible={isOverlayOpen}
          onClose={() => setIsOverlayOpen(false)}
        >
          <View
            surface="primary"
            inset="l"
            roundness="m"
            style={{
              width: '400px',
              height: '250px',
              margin: '48px auto',
            }}
          >
            Overlay content
          </View>
        </Overlay>
      </>
    )
  },
}

export const Default = {}