"use client";
import { ReactNode, useEffect } from "react";

type DialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  showDialogCloseButton?: boolean;
  title?: string,
  children: ReactNode;
};

export default function Dialog({ open, onOpenChange, showDialogCloseButton = true, title, children }: DialogProps) {
  useEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50">
      <div
        className="absolute inset-0 bg-black/50"
        onClick={() => onOpenChange(false)}
      />
      <div className="absolute inset-0 flex items-center justify-center p-4">
        <div className="max-h-full overflow-auto p-6 min-w-full md:min-w-2xl max-w-[80%] rounded-xl bg-white shadow-xl">
          <div className="mb-4 p-4 rounded-sm bg-[#E2E8F0] flex items-center justify-between">
            {title && <h3 className="text-lg font-semibold">{title}</h3>}
            {showDialogCloseButton && (
              <button
                type="button"
                aria-label="Close"
                onClick={() => onOpenChange(false)}
              >
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.6499 6.65002L12.6499 12.65M12.6499 6.65002L6.6499 12.65M2.6499 0.650024H16.6499C17.7545 0.650024 18.6499 1.54545 18.6499 2.65002V16.65C18.6499 17.7546 17.7545 18.65 16.6499 18.65H2.6499C1.54533 18.65 0.649902 17.7546 0.649902 16.65V2.65002C0.649902 1.54545 1.54533 0.650024 2.6499 0.650024Z" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            )}
          </div>
          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}