import * as Dialog from "@radix-ui/react-dialog";
import { ReactNode } from "react";
import { icons } from "#/assets/icons"
import Image from "next/image";

export function Modal({
  trigger,
  title,
  content,
  open,
  onOpenChange
}: {
  trigger: ReactNode;
  title?: string | ReactNode;
  content: ReactNode;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Trigger asChild>
        {trigger}
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/25 z-40" />
        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-max flex flex-col gap-10 bg-white rounded-lg shadow-xl z-50 px-16 py-12"
          // onPointerDownOutside={(e) => e.preventDefault()}
        >
          <Dialog.Title className="text-xl font-bold text-center text-[30px] ">
            {title}
          </Dialog.Title>
          
          <div className="flex gap-5 justify-center">
            {content}
          </div>

            <div className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer" 
              onClick={() => {onOpenChange?.(false)}}
            >
              <Image src={icons.crossIcon} alt="fermer"/>
            </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}