/* eslint-disable react-hooks/exhaustive-deps */
import clsx from "clsx";
import PopupHeader from "./PopupHeader";

interface PopupWrapperProps {
  children: React.ReactNode;
  className?: string;
  title?: string;
  leftButton?: React.ReactNode;
  headerRef?: React.RefObject<HTMLDivElement | null>;
}

function PopupWrapper({
  children,
  className,
  title,
  leftButton,
  headerRef,
}: PopupWrapperProps) {
  return (
    <div
      className={clsx(
        "2xl:rounded-[2.222vw] bg-white shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] 2xl:w-[21.667vw] sm:rounded-[32px] max-sm:w-screen max-sm:rounded-t-[32px]",
        className
      )}
    >
      {/* Полоска-ручка для свайпа на мобильных */}
      <div className="hidden absolute -top-3 left-1/2 justify-center pt-1 pb-1 -translate-x-1/2 max-sm:flex">
        <div className="w-8 h-1 bg-[#141414] rounded-full opacity-50" />
      </div>

      <PopupHeader title={title} leftButton={leftButton} ref={headerRef} />
      <div className="2xl:p-[1.389vw] p-5">{children}</div>
    </div>
  );
}

export default PopupWrapper;
