import React from "react";

interface CertificateModalProps {
  title: string;
  imageUrl: string;
  onClose: () => void;
}

const CertificateModal: React.FC<CertificateModalProps> = ({ title, imageUrl, onClose }) => {
  return (
    <div
      className="fixed inset-0 z-50 bg-black/70 backdrop-blur-[10px] flex items-center justify-center px-4"
      onClick={onClose}
    >
      <div
        className="relative bg-transparent max-w-[700px] w-full flex flex-col items-center"
        onClick={(e) => e.stopPropagation()}
      >
        {/* 이미지 */}
        <img
          src={imageUrl}
          alt={title}
          className="w-[564px] h-[788px] rounded-[5px] object-contain mt-14"
        />

        {/* 설명 텍스트 */}
        <div className="mt-4 text-center text-white text-lg font-light font-['Noto_Sans_KR']">
          {title}
        </div>
      </div>

      {/* 닫기 버튼 */}
      <button
        onClick={onClose}
        className="absolute top-5 right-10 mt-4 mr-4 w-10 h-10 bg-zinc-300 rounded-full flex items-center justify-center"
      >
        <span className="text-black text-2xl font-thin font-['Noto_Sans_KR']">X</span>
      </button>
    </div>
  );
};

export default CertificateModal;
