import React, { ReactNode } from 'react'
import { useAppSelector } from '../stores/hooks'

type Props = {
  zIndex?: string
  type?: string
  children?: ReactNode
  className?: string
  onClick: (e: React.MouseEvent) => void
}

export default function OverlayLayer({
  zIndex = 'z-50',
  type = 'flex',
  children,
  className,
  ...props
}: Props) {
  const overlayStyle = useAppSelector((state) => state.style.overlayStyle)

  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault()

    if (props.onClick) {
      props.onClick(e)
    }
  }

  return (
    <div
      className={`${type} ${zIndex} ${className} items-center flex-col justify-center overflow-hidden fixed inset-0`}
    >
      <div
        className={`${overlayStyle} absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-dark-700 dark:via-dark-900 dark:to-dark-700`}
        onClick={handleClick}
      ></div>

      {children}
    </div>
  )
}