"use client";

import { CloseXIcon } from "../dashboard/icons";

export default function SuccessModal({
  open,
  onClose,
  title,
  lines,
}: {
  open: boolean;
  onClose: () => void;
  title: string;
  lines: string[];
}) {
  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 px-4">
      <div className="relative w-full max-w-[400px] rounded-2xl bg-white px-8 py-9 text-center shadow-[0_24px_60px_rgba(15,23,42,0.25)]">
        <button
          type="button"
          onClick={onClose}
          aria-label="Close"
          className="absolute right-4 top-4 flex h-6 w-6 items-center justify-center rounded-full text-[#98A2B3] transition-colors hover:bg-[#F2F4F7] hover:text-[#344054]"
        >
          <CloseXIcon className="h-3.5 w-3.5" />
        </button>

        <div
          className="relative mx-auto h-20 w-20 rounded-full"
          style={{ background: "linear-gradient(135deg, #4ADE80 50%, #16A34A 50%)" }}
        >
          <div className="absolute inset-[13px] flex items-center justify-center rounded-full bg-white">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M6 12.5 10.2 16.5 18 8" stroke="#16A34A" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
        </div>

        <h2 className="mt-5 text-[17px] font-bold text-[#101828]">{title}</h2>

        <div className="mt-2 space-y-0.5">
          {lines.map((line) => (
            <p key={line} className="text-[13px] leading-5 text-[#667085]">
              {line}
            </p>
          ))}
        </div>
      </div>
    </div>
  );
}