src/components/auth/AuthPageShell.tsx

"use client";

import "./AuthPageShell.css";
import Image from "next/image";
import Link from "next/link";
import type { ReactNode } from "react";

type AuthPageShellProps = {
  children: ReactNode;
};

export const authInputClass =
  "h-[52px] w-full rounded-[10px] border border-[#cecec8] bg-white px-4 text-[16px] text-[#17181b] outline-none transition-[border-color,box-shadow,background-color] duration-150 placeholder:text-[#8a8b84] hover:border-[#a9aaa3] focus:border-[#17181b] focus:shadow-[0_0_0_3px_rgba(23,24,27,0.1)] disabled:cursor-not-allowed disabled:bg-[#f0f0ed] disabled:text-[#5c6170] sm:text-[15px]";

export const authPrimaryButtonClass =
  "inline-flex h-[52px] w-full cursor-pointer items-center justify-center gap-2 rounded-[10px] bg-[#17181b] px-5 text-[14px] font-semibold text-white transition-colors duration-150 hover:bg-[#303136] active:bg-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-2 focus-visible:ring-offset-[#fcfcfa] disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:bg-[#17181b]";

export const authSecondaryButtonClass =
  "inline-flex h-[52px] w-full cursor-pointer items-center justify-center gap-2.5 rounded-[10px] border border-[#cecec8] bg-white px-5 text-[13px] font-semibold text-[#17181b] transition-[border-color,background-color] duration-150 hover:border-[#9b9c95] hover:bg-[#f5f4f0] active:bg-[#ecebe7] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-45";

export const authErrorClass =
  "rounded-xl border border-[#d7a4a0] bg-[#fff6f5] px-3 py-2.5 text-[12px] font-medium leading-5 text-[#8a2f2a]";

export const authStatusClass =
  "rounded-xl border border-[#b7cdbd] bg-[#f3f8f4] px-3 py-2.5 text-[12px] font-medium leading-5 text-[#2f6240]";

export const authIconWellClass =
  "grid size-11 place-items-center rounded-xl border border-[#e5e5e1] bg-[#f0f0ed] text-[#17181b]";

export function AuthPageShell({
  children,
}: AuthPageShellProps) {
  return (
    <main className="docdoe-auth min-h-svh overflow-x-clip bg-[#fcfcfa] px-5 text-[#17181b] sm:px-8">
      <div className="mx-auto flex min-h-svh w-full max-w-[1040px] flex-col">
        <header className="flex min-h-[76px] items-center justify-between border-b border-[#e5e5e1] py-4">
          <BrandLink />
          <p className="hidden text-[11px] font-medium tracking-[0.01em] text-[#6f706a] sm:block">
            Classes · practice · revision
          </p>
        </header>

        <div className="flex flex-1 items-center py-10 sm:py-14">
          <section className="auth-card mx-auto w-full max-w-[440px] bg-transparent text-[#17181b]">
            {children}
          </section>
        </div>

        <footer className="flex min-h-[58px] items-center justify-center border-t border-[#e5e5e1] py-4 text-center text-[11px] leading-5 text-[#777873] sm:justify-between sm:text-left">
          <span>Structured study, chapter by chapter.</span>
          <span className="hidden sm:inline">Made for focused school evenings.</span>
        </footer>
      </div>
    </main>
  );
}

function BrandLink() {
  return (
    <Link
      href="/"
      className="inline-flex w-fit items-center gap-3 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-4 focus-visible:ring-offset-[#fcfcfa]"
    >
      <Image
        src="/docdoe-icon.svg"
        alt=""
        width={36}
        height={36}
        className="size-9 rounded-[10px]"
        priority
        unoptimized
      />
      <span>
        <span
          className="block font-[family-name:var(--df-display)] text-[17px] font-extrabold tracking-[-0.04em] text-[#17181b] sm:text-[18px]"
        >
          DocDoe
        </span>
        <span className="block text-[10px] font-medium text-[#6f706a]">
          Your study desk
        </span>
      </span>
    </Link>
  );
}

export function AuthDivider() {
  return (
    <div className="relative my-2 flex items-center justify-center" aria-hidden="true">
      <div className="h-px w-full bg-[#e5e5e1]" />
      <span className="absolute bg-[#fcfcfa] px-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-[#777873]">
        or
      </span>
    </div>
  );
}

export function AuthGoogleButton({
  disabled = false,
  onClick,
}: {
  disabled?: boolean;
  onClick: () => void;
}) {
  return (
    <button type="button" onClick={onClick} disabled={disabled} className={authSecondaryButtonClass}>
      <svg className="size-4" viewBox="0 0 24 24" aria-hidden="true">
        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" />
        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
      </svg>
      Continue with Google
    </button>
  );
}