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>
  );
}