import ModalHeader from "./ModalHeader";
import clsx from "clsx";

interface ModalWrapperProps {
  children: React.ReactNode;
  title?: string;
  leftButton?: React.ReactNode;
  className?: string;
}

function ModalWrapper({
  children,
  title,
  leftButton,
  className,
}: ModalWrapperProps) {
  return (
    <div
      className={clsx(
        "bg-white 2xl:rounded-[2.222vw] rounded-[32px] relative max-sm:rounded-b-none max-sm:max-h-[97.5dvh]",
        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>

      <ModalHeader title={title} leftButton={leftButton} />
      <div
        className={clsx(
          "2xl:p-[1.389vw] p-5 overflow-y-auto min-h-full bg-white",
          !title && "!pt-0"
        )}
      >
        {children}
      </div>
    </div>
  );
}

export default ModalWrapper;