"use client";

import React from "react";

type LoginErrorModalProps = {
	open: boolean;
	onClose: () => void;
	errorMessage?: string;
};

export default function LoginErrorModal({ open, onClose, errorMessage }: LoginErrorModalProps) {
	if (!open) return null;

	const isSuspendedAccount = errorMessage?.includes("정지된 계정입니다");

	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="login-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)]"
			>
				<div className="text-[18px] leading-normal font-semibold text-neutral-700 mb-8" id="login-error-title">
					{isSuspendedAccount ? (
						<>
							정지된 계정입니다.
							<br />
							확인 후 다시 시도해 주세요.
						</>
					) : (
						<>
							아이디 또는 비밀번호가 일치하지 않습니다.
							<br />
							확인 후 다시 시도해 주세요.
						</>
					)}
				</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"
					>
						확인
					</button>
				</div>
			</div>
		</div>
	);
}


