// <script>
//   const modal = document.getElementById('modal')
//   const modalButton = document.getElementById('modal-button')

//   modalButton?.addEventListener('click', () => {
//     gsap.to(modal, {
//       duration: 0,
//       display: 'block',
//       ease: 'power2.out',
//     })
//   })

//   modal?.addEventListener('click', () => {
//     gsap.to(modal, {
//       duration: 0,
//       display: 'none',
//       ease: 'power2.out',
//     })
//   })
// </script>

import '../styles/Modal.sass'
import { type JSXElement, Show, createSignal } from 'solid-js'
import gsap from 'gsap'
import Button from './Button'

interface Props {
  children: JSXElement
  background?: string
  color?: string
  border?: string
}

export default (props: Props) => {
  let dialogRef!: HTMLDivElement

  const [open, setOpen] = createSignal(false)

  const openHandler = () => {
    gsap.to(dialogRef, {
      duration: 0,
      display: 'flex',
      ease: 'power2.out',
    })
  }

  const closeHandler = () => {
    gsap.to(dialogRef, {
      duration: 0,
      display: 'none',
      ease: 'power2.out',
    })
  }

  return (
    <>
      <div class="modal" ref={dialogRef} onClick={closeHandler}>
        <Show when={props.border}>
          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
            {props.children}
          </div>
        </Show>

        <Show when={!props.border}>
          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
            {props.children}
          </div>
        </Show>
      </div>
    </>
  )
}