import React from "react";
import { cn } from "@/lib/utils";

export interface DialogProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  description?: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
  maxWidth?: string;
}

export function Dialog({
  isOpen,
  onClose,
  title,
  description,
  children,
  footer,
  maxWidth = "max-w-lg",
}: DialogProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-xs animate-in fade-in duration-200">
      <div
        className="fixed inset-0"
        onClick={onClose}
        aria-hidden="true"
      />
      <div
        className={cn(
          "relative z-10 w-full rounded-2xl bg-white p-6 shadow-2xl border border-[#E1E6E7] max-h-[90vh] flex flex-col overflow-hidden animate-in zoom-in-95 duration-200",
          maxWidth
        )}
      >
        <div className="flex items-start justify-between pb-3 border-b border-[#E1E6E7]">
          <div>
            {title && <h2 className="text-xl font-extrabold text-[#2E3A3F]">{title}</h2>}
            {description && <p className="text-xs text-[#66767A] mt-1">{description}</p>}
          </div>
          <button
            onClick={onClose}
            className="rounded-full p-1.5 text-[#66767A] hover:bg-[#EAF1F2] hover:text-[#2E3A3F] transition-colors"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div className="py-4 overflow-y-auto flex-1">{children}</div>

        {footer && (
          <div className="pt-3 border-t border-[#E1E6E7] flex justify-end gap-3 mt-2">
            {footer}
          </div>
        )}
      </div>
    </div>
  );
}