import Link from "next/link";
import { ReactNode } from "react";
import VerificationStamp from "./VerificationStamp";

interface AuthLayoutProps {
  eyebrow: string;
  title: string;
  subtitle: string;
  children: ReactNode;
  footer: ReactNode;
  showStamp?: boolean;
}

export default function AuthLayout({
  eyebrow,
  title,
  subtitle,
  children,
  footer,
  showStamp = true,
}: AuthLayoutProps) {
  return (
    <div className="max-w-6xl mx-auto px-6 py-12 lg:py-20">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        {/* Form card */}
        <div className="bg-white border border-mist rounded-lg shadow-card p-6 sm:p-8 max-w-md w-full mx-auto lg:mx-0 order-2 lg:order-1">
          <Link href="/" className="font-display font-semibold text-2xl text-forest-deep">
            Villa<span className="text-gold-deep">.</span>
          </Link>
          <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mt-6 mb-2">
            {eyebrow}
          </div>
          <h1 className="text-2xl sm:text-3xl mb-2">{title}</h1>
          <p className="text-sm text-ink-soft mb-6">{subtitle}</p>

          {children}

          <p className="text-sm text-ink-soft mt-6 text-center">{footer}</p>
        </div>

        {/* Side panel */}
        <div className="order-1 lg:order-2 text-center lg:text-left">
          <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">
            Rental discovery, verified
          </div>
          <h2 className="text-3xl mb-3">Every home on Villa is checked before it&apos;s listed</h2>
          <p className="text-ink-soft max-w-[42ch] mx-auto lg:mx-0 mb-6">
            Create an account to save properties, message landlords, and request viewings — or
            list your own property and reach tenants searching in Akim Oda.
          </p>
          {showStamp && (
            <div className="flex justify-center lg:justify-start gap-6">
              <VerificationStamp variant="property" size={88} />
              <VerificationStamp variant="landlord" size={88} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}