"use client";

import React from "react";

type RegisterCodeErrorModalProps = {
	open: boolean;
	onClose: () => void;
	message?: string;
	confirmText?: string;
};

/**
 * 회원가입 이메일 인증번호 오류 안내 모달.
 * - open: 모달 표시 여부
 * - onClose: 닫기 핸들러
 * - message: 본문 메시지 (기본값: 인증번호 불일치 안내)
 * - confirmText: 확인 버튼 텍스트 (기본값: "확인")
 */
export default function RegisterCodeErrorModal({
	open,
	onClose,
	message = "인증번호가 일치하지 않습니다.\n다시 한번 확인 후 입력해 주세요.",
	confirmText = "확인",
}: RegisterCodeErrorModalProps) {
	if (!open) return null;

	return (
		<div className="fixed inset-0 z-50 flex items-center justify-center">
			<button
				type="button"
				aria-label="닫기"
				className="absolute inset-0 bg-black/40 cursor-default"
				onClick={onClose}
			/>
			<div
				role="dialog"
				aria-modal="true"
				aria-labelledby="register-code-error-title"
				className="relative bg-white box-border flex flex-col items-stretch justify-start p-6 rounded-[8px] min-w-[500px] max-w-[calc(100%-48px)] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)]"
			>
				<div className="text-[18px] leading-normal font-semibold text-neutral-700 mb-8 whitespace-pre-line" id="register-code-error-title">
					{message}
				</div>
				<div className="flex items-center justify-end gap-[8px]">
					<button
						type="button"
						onClick={onClose}
						className="h-[40px] min-w-20 px-[12px] rounded-[8px] bg-active-button text-white text-[16px] font-semibold cursor-pointer"
					>
						{confirmText}
					</button>
				</div>
			</div>
		</div>
	);
}


