"use client";

import type { PropsWithChildren } from "react";

import { useApp } from "@/hooks/useApp";
import { useBreakpoints } from "@/hooks/useBreakpoints";
import { showOverlay } from "@/hooks/useOverlay";

interface OverlayWrapperProps
  extends PropsWithChildren,
    React.HTMLAttributes<HTMLDivElement> {}

const OverlayWrapper = (props: OverlayWrapperProps) => {
  const { isB2C } = useApp();
  const { isDesktop } = useBreakpoints();

  return (
    <div
      role="presentation"
      aria-hidden="true"
      className={props.className}
      onClick={() => {
        if (isB2C && isDesktop) {
          showOverlay();
        }
      }}
    >
      {props.children}
    </div>
  );
};

export default OverlayWrapper;