import Link from 'next/link';

export default function AuthShell({
  photo,
  photoAlt,
  caption,
  captionSub,
  children,
}: {
  photo: string;
  photoAlt: string;
  caption: string;
  captionSub: string;
  children: React.ReactNode;
}) {
  return (
    <main className="min-h-screen grid lg:grid-cols-2">
      {/* Panel del formulario */}
      <div className="flex flex-col px-6 py-8 sm:px-10 lg:px-16">
        <Link href="/" className="inline-flex items-center gap-2 self-start">
          <span className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary-700 text-lg font-black italic leading-none text-white">
            R
          </span>
          <span className="text-lg font-extrabold tracking-tight text-black">Reformix</span>
        </Link>

        <div className="flex flex-1 items-center justify-center py-10">
          <div className="w-full max-w-sm">{children}</div>
        </div>
      </div>

      {/* Panel de la foto (oculto en móvil) */}
      <div className="relative hidden lg:block">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={photo} alt={photoAlt} className="absolute inset-0 h-full w-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
        <div className="absolute inset-x-0 bottom-0 p-12">
          <p className="max-w-md text-3xl font-black leading-tight tracking-tight text-white">
            {caption}
          </p>
          <p className="mt-3 max-w-md text-sm text-white/80">{captionSub}</p>
        </div>
      </div>
    </main>
  );
}
