import Link from "next/link";

type TossFailPageProps = {
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
};

function pickParam(value: string | string[] | undefined) {
  return Array.isArray(value) ? value[0] : value;
}

export default async function TossFailPage({ searchParams }: TossFailPageProps) {
  const params = searchParams ? await searchParams : {};
  const message = pickParam(params.message) ?? "결제가 중단되었거나 인증 중 실패했습니다.";

  return (
    <main className="min-h-screen bg-[#f7f9fe] px-5 py-10 sm:px-8 sm:py-14">
      <div className="mx-auto w-full max-w-[760px]">
        <div className="rounded-[30px] border border-[#e3eaf7] bg-white px-6 py-7 shadow-[0_24px_60px_rgba(23,43,88,0.08)] sm:px-8 sm:py-8">
          <p className="text-[13px] font-semibold uppercase tracking-[0.18em] text-[#b25a63]">
            OFFICIAL MAIL
          </p>
          <h1 className="mt-3 text-[28px] font-semibold tracking-[-0.05em] text-[#16233c] sm:text-[34px]">
            결제 실패 또는 중단
          </h1>

          <div className="mt-8 rounded-[24px] border border-rose-200 bg-rose-50 px-5 py-5">
            <p className="text-[18px] font-semibold text-rose-600">결제창이 완료되지 않았습니다.</p>
            <p className="mt-3 text-[14px] leading-7 text-rose-700/90">{message}</p>
          </div>

          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link
              href="/mail?panel=setup&section=billing"
              prefetch={false}
              className="om-btn-primary h-11 rounded-[14px] px-5 text-[13px]"
            >
              결제 및 구독으로 돌아가기
            </Link>
            <Link
              href="/mail?folder=all"
              prefetch={false}
              className="om-btn-secondary h-11 rounded-[14px] px-5 text-[13px]"
            >
              메일함 보기
            </Link>
          </div>
        </div>
      </div>
    </main>
  );
}