"use client";

import { cn } from "@/lib/utils";
import { X } from "lucide-react";
import type { ReactNode } from "react";

interface Props { open: boolean; onClose: () => void; title?: string; children: ReactNode; className?: string; maxWidth?: string }

export function Modal({ open, onClose, title, children, className, maxWidth = "max-w-lg" }: Props) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 backdrop-blur-sm p-4 animate-in" onClick={onClose}>
      <div className={cn("bg-white rounded-xl shadow-modal w-full overflow-hidden animate-slide-up", maxWidth, className)} onClick={(e) => e.stopPropagation()}>
        {title && (
          <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
            <h2 className="font-bold text-slate-900">{title}</h2>
            <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400 transition-colors"><X className="w-4 h-4" /></button>
          </div>
        )}
        {children}
      </div>
    </div>
  );
}

export function ModalBody({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("px-5 py-5", className)}>{children}</div>;
}

export function ModalFooter({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("flex items-center justify-end gap-2 px-5 py-3 border-t border-slate-100 bg-slate-50/50", className)}>{children}</div>;
}
