"use client";

import React from "react";

type NoticeValidationModalProps = {
	open: boolean;
	onClose: () => void;
};

/**
 * 공지사항 작성 시 제목 또는 내용이 비어있을 때 표시되는 검증 모달
 */
export default function NoticeValidationModal({
	open,
	onClose,
}: NoticeValidationModalProps) {
	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="notice-validation-title"
				className="relative bg-white box-border flex flex-col items-stretch justify-end gap-[32px] p-6 rounded-[8px] w-[320px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)]"
			>
				<div className="flex flex-col gap-4 items-center w-full">
					<p
						className="text-[15px] font-normal leading-[1.5] text-[#333c47] w-full"
						id="notice-validation-title"
					>
						내용 또는 제목을 입력해 주세요.
					</p>
				</div>
				<div className="flex gap-2 items-center justify-end w-full">
					<button
						type="button"
						onClick={onClose}
						className="h-[37px] min-w-[82px] px-2 rounded-[8px] bg-[#1f2b91] text-white text-[16px] font-semibold leading-[1.5] cursor-pointer whitespace-nowrap"
					>
						확인
					</button>
				</div>
			</div>
		</div>
	);
}