import React from 'react'

import { ModalProps } from './Modal.types'

import './Modal.css'

import Button from '../Button'

const Overlay = ({ children }: any) => {
  return (
    <div className='absolute bg-black bg-opacity-50 flex h-screen items-center justify-center left-0 overflow-hidden top-0 w-full z-30'>
      {children}
    </div>
  )
}

const Modal = ({
  title,
  icon,
  width = 'w-3/4',
  close,
  visible,
  children
}: ModalProps) => {
  icon = `fa-regular fa-${icon}` || 'fa-regular fa-question-circle'

  if (visible) {
    return (
      <Overlay>
        <div className={`bg-white relative rounded ${width}`}>
          <div className='border-b flex items-center px-3 py-3 relative'>
            {icon && (
              <div className='bg-gray-200 flex h-7.5 items-center justify-center mr-3 p-2 rounded text-gray-900 w-7.5'>
                <i className={icon} />
              </div>
            )}
            <h3 className='flex font-semibold items-center text-gray-900 text-sm tracking-wide'>
              {title}
            </h3>

            <Button
              variant='close'
              icon='xmark'
              onClick={close}
              className='absolute ml-auto -right-2.5'
              size='xs'
            >
              <i className='fa-solid fa-xmark' />
            </Button>
          </div>
          <div className='p-4 text-sm'>{children}</div>
        </div>
      </Overlay>
    )
  }
  return null
}

export default Modal
