"use client";

import { useState, type ReactNode } from "react";

export default function Modal({
  trigger,
  title,
  children,
}: {
  trigger: ReactNode;
  title: string;
  children: (close: () => void) => ReactNode;
}) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <span onClick={() => setOpen(true)}>{trigger}</span>
      {open && (
        <div
          className="fixed inset-0 bg-black/65 flex items-center justify-center z-50 p-5"
          onClick={() => setOpen(false)}
        >
          <div
            className="w-full max-w-[440px] bg-bg-card border border-border-input rounded-2xl p-5"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="font-heading text-lg font-bold mb-4">{title}</div>
            {children(() => setOpen(false))}
          </div>
        </div>
      )}
    </>
  );
}