"use client";

import React from "react";
import Link from "next/link";

type ResetPasswordDoneProps = {
	open: boolean;
	onClose?: () => void;
	children?: React.ReactNode;
	title?: string;
	description?: string;
	primaryHref?: string;
	primaryText?: string;
};

/**
 * 비밀번호 재설정 완료 전체화면 컴포넌트.
 * - open이 true일 때 화면 전체를 덮어 표시
 * - children 전달 시 피그마 컴포넌트를 그대로 주입하여 커스텀 UI 표시
 * - 기본 제공 UI는 디자인 토큰(색상/타이포)과 기존 완료 컴포넌트 패턴과 동일하게 맞춤
 */
export default function ResetPasswordDone({
	open,
	onClose,
	children,
	title = "비밀번호 재설정이 완료됐습니다.",
	description = "새로운 비밀번호로 다시 로그인 해주세요.",
	primaryHref = "/login",
	primaryText = "로그인",
}: ResetPasswordDoneProps) {
	if (!open) return null;

	return (
		<div className="fixed inset-0 z-50 bg-white">
			<div className="absolute inset-0 overflow-auto">
				<div className="min-h-screen w-full flex flex-col items-center justify-center p-6">
					{children ? (
						children
					) : (
						<div className="w-full max-w-[560px] text-center">
							<div className="text-[24px] font-extrabold leading-[150%] text-neutral-700 mb-3">
								{title}
							</div>
							<p className="text-[15px] text-basic-text mb-8 whitespace-pre-line">
								{description}
							</p>
							<div className="flex gap-3">
								<Link
									href={primaryHref}
									className="h-[40px] flex-1 rounded-[12px] bg-active-button text-white text-[18px] font-semibold flex items-center justify-center"
								>
									{primaryText}
								</Link>
								{onClose && (
									<button
										type="button"
										onClick={onClose}
										className="h-[40px] flex-1 rounded-[12px] bg-[#f1f3f5] text-[18px] font-semibold text-basic-text cursor-pointer"
									>
										닫기
									</button>
								)}
							</div>
						</div>
					)}
				</div>
			</div>
			{onClose && (
				<button
					type="button"
					aria-label="닫기"
					className="absolute inset-0 -z-10 cursor-default"
					onClick={onClose}
				/>
			)}
		</div>
	);
}


