import type { ReactNode } from "react";
import { playSound } from "../usePeonSounds";

interface ModalProps {
  open: boolean;
  onClose: () => void;
  title: string;
  children: ReactNode;
}

export default function Modal({ open, onClose, title, children }: ModalProps) {
  if (!open) return null;

  const handleClose = () => {
    playSound("swobu");
    onClose();
  };

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
      onClick={handleClose}
    >
      <div
        className="w-full max-w-lg rounded-lg border border-[#2e3625] bg-[#1a1f14] p-6"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-[#d4d2c4]">{title}</h2>
          <button
            onClick={handleClose}
            className="text-[#8a8672] hover:text-[#d4d2c4]"
          >
            &times;
          </button>
        </div>
        {children}
      </div>
    </div>
  );
}
