"use client";

import Button from "@/components/ui/Button";
import { cn } from "@/lib/utils";

interface EmptyModalProps {
  open: boolean;
  onClose: () => void;
  title?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  onPrimaryClick?: () => void;
  onSecondaryClick?: () => void;
  children?: React.ReactNode;
  className?: string;
}

export default function EmptyModal({
  open,
  onClose,
  title = "Nothing here yet",
  description,
  primaryLabel,
  secondaryLabel,
  onPrimaryClick,
  onSecondaryClick,
  children,
  className,
}: EmptyModalProps) {
  if (!open) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/35 px-4 py-6">
      <section
        className={cn(
          "relative w-full max-w-[420px] rounded-lg bg-white p-6 text-center shadow-2xl",
          className
        )}
      >
        <button
          type="button"
          onClick={onClose}
          className="absolute right-5 top-5 text-gray-400 transition-colors hover:text-gray-700"
          aria-label="Close modal"
        >
          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
          </svg>
        </button>

        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 text-gray-400">
          <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M20 13V7a2 2 0 0 0-2-2h-3.5L13 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5" />
            <path strokeLinecap="round" strokeLinejoin="round" d="M16 19h6M19 16v6" />
          </svg>
        </div>

        {title && <h2 className="mt-5 text-lg font-semibold text-[#1f2440]">{title}</h2>}
        {description && <p className="mt-2 text-sm leading-6 text-gray-500">{description}</p>}

        {children && <div className="mt-6">{children}</div>}

        {(primaryLabel || secondaryLabel) && (
          <div className="mt-7 grid gap-3 sm:grid-cols-2">
            {secondaryLabel && (
              <Button
                variant="ghost"
                onClick={onSecondaryClick ?? onClose}
                className="h-11 rounded-full bg-gray-100 text-sm font-semibold text-gray-700 hover:bg-gray-200"
              >
                {secondaryLabel}
              </Button>
            )}
            {primaryLabel && (
              <Button
                variant="teal"
                onClick={onPrimaryClick}
                className="h-11 rounded-full text-sm font-semibold"
              >
                {primaryLabel}
              </Button>
            )}
          </div>
        )}
      </section>
    </div>
  );
}
