"use client";

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

type IdFindDoneProps = {
	on: boolean;
	onClose?: () => void;
	children?: React.ReactNode;
	title?: string;
	description?: string;
	primaryHref?: string;
	primaryText?: string;
	userId?: string;
	secondaryHref?: string;
	secondaryText?: string;
	joinedAtText?: string;
};

export default function IdFindDone({
	on,
	onClose,
	children,
	title = "아이디 확인",
	description = "회원님의 정보와 일치하는 아이디 목록입니다.",
	primaryHref = "/login",
	primaryText = "로그인",
	userId = "test@example.com",
	secondaryHref = "/reset-password",
	secondaryText = "비밀번호 재설정",
	joinedAtText = "가입일: 2025년 10월 17일",
}: IdFindDoneProps) {
	if (!on) 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-[480px] text-center">
							<div className="space-y-4">
								<div className="text-[24px] font-extrabold leading-[150%] text-neutral-700">
									{title}
								</div>
								<p className="text-[18px] leading-[150%] text-[#6c7682] whitespace-pre-line">
									{description}
								</p>
							</div>
							<div className="mt-[60px]">
								<div className="bg-[#f9fafb] border border-neutral-40 rounded-[16px] py-[24px] min-h-[108px] flex items-center justify-center">
									{userId && (
										<p className="text-[18px] font-semibold text-neutral-700 text-center">
											{userId}
										</p>
									)}
									{/* {joinedAtText && (
										<p className="text-[16px] text-[#6c7682] mt-2">
											({joinedAtText})
										</p>
									)} */}
								</div>
							</div>
							<div className="mt-[60px] flex gap-3">
								<Link
									href={secondaryHref}
									className="h-[56px] flex-1 rounded-[12px] bg-[#f1f3f5] text-[18px] font-semibold text-basic-text flex items-center justify-center"
								>
									{secondaryText}
								</Link>
								<Link
									href={primaryHref}
									className="h-[56px] flex-1 rounded-[12px] bg-active-button text-white text-[18px] font-semibold flex items-center justify-center"
								>
									{primaryText}
								</Link>
							</div>
						</div>
					)}
				</div>
			</div>
			{onClose && (
				<button
					type="button"
					aria-label="닫기"
					className="absolute inset-0 -z-10 cursor-default"
					onClick={onClose}
				/>
			)}
		</div>
	);
}
