/* eslint-disable tailwindcss/migration-from-tailwind-2 */

"use client";

import { hideOverlay, useOverlay } from "@/hooks/useOverlay";

const Overlay = () => {
  const { isOverlayVisible } = useOverlay();

  if (!isOverlayVisible) return null;
  return (
    <div
      role="presentation"
      aria-hidden="true"
      onClick={() => hideOverlay()}
      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
    />
  );
};

export default Overlay;