'use client';

import Link from "next/link";
import ModalCloseSvg from "../svgs/closexsvg";

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

export default function PasswordChangeDoneModal({ open, onClose }: Props) {
  if (!open) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
      role="dialog"
      aria-modal="true"
    >
      <div className="w-[480px] h-[437px] rounded-[12px] border border-[#dee1e6] bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)] flex flex-col justify-between">
        <div className="flex h-[80px] items-center justify-end p-6">
          <button
            type="button"
            aria-label="닫기"
            onClick={onClose}
            className="inline-flex size-6 items-center justify-center text-[#333c47] hover:opacity-80 cursor-pointer"
          >
            <ModalCloseSvg />
          </button>
        </div>

        <div className="px-6 pb-0 ">
          <div className="w-full mx-auto flex flex-col items-center gap-4">
            <h2 className="text-[24px] font-extrabold leading-[1.45] text-[#333c47]">
              비밀번호 변경이 완료됐습니다.
            </h2>
            <p className="text-[18px] leading-[1.5] text-[#6c7682] text-center">
              새로운 비밀번호로 다시 로그인 해주세요.
            </p>
          </div>
        </div>

        <div className="flex items-center justify-center p-6">
          <Link
            href="/login"
            className="h-12 w-[284px] rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white inline-flex items-center justify-center cursor-pointer"
          >
            로그인
          </Link>
        </div>
      </div>
    </div>
  );
}