import Link from "next/link";
import type { ReactNode } from "react";
import { SiteFooter } from "@/components/site-footer";

function AuthMark() {
  return (
    <div className="flex items-center justify-center gap-2.5 text-center sm:gap-3">
      <span className="flex items-center justify-center text-[#2f6df6]">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-[32px] w-[32px] sm:h-[40px] sm:w-[40px]"
        >
          <rect x="3.5" y="5.5" width="17" height="13" rx="2.5" />
          <path d="m4.8 7 7.2 5.6L19.2 7" />
        </svg>
      </span>
      <span className="text-[28px] font-extrabold tracking-[-0.08em] text-[#2f6df6] sm:text-[42px]">
        오피셜메일
      </span>
    </div>
  );
}

export function AuthPageShell({
  title,
  description,
  children,
}: {
  title: string;
  description: string;
  children: ReactNode;
}) {
  return (
    <div className="flex min-h-screen flex-col bg-white">
      <main className="flex flex-1 items-start justify-center px-4 pb-12 pt-12 sm:px-6 sm:pb-16 sm:pt-[88px]">
        <div className="w-full max-w-[520px] sm:max-w-[560px]">
          <Link href="/" className="block">
            <AuthMark />
          </Link>

          <div className="mt-8 rounded-[18px] border border-[#dbe2ec] bg-white px-5 py-6 shadow-[0_14px_40px_rgba(15,23,42,0.04)] sm:mt-9 sm:rounded-[20px] sm:px-6 sm:py-7">
            <div className="text-center">
              <h1 className="text-[21px] font-semibold tracking-[-0.05em] text-[#121a2f] sm:text-[28px]">
                {title}
              </h1>
              <p className="mx-auto mt-3 max-w-[420px] text-[13px] leading-6 text-[#7b8597] sm:text-[14px]">
                {description}
              </p>
            </div>

            <div className="mt-7">{children}</div>
          </div>
        </div>
      </main>

      <SiteFooter />
    </div>
  );
}