import * as Dialog from "@radix-ui/react-dialog";
import { ReactNode, useState } from "react";

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-full max-w-md bg-white rounded-lg shadow-xl z-50 p-6"
          // onPointerDownOutside={(e) => e.preventDefault()}
        >
          <Dialog.Title className="text-xl font-bold text-center my-4">
            {title}
          </Dialog.Title>
          
          <div className=" justify-center">
            {content}
          </div>

            <div className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 cursor-pointer" 
              onClick={() => {onOpenChange?.(false)}}
            >
              X
            </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}