import { ShieldHalf } from "lucide-react";
import AuthCarousel from "./AuthCarousel";

export default function AuthShell({ title, subtitle, children }: {
  title: string; subtitle?: string; children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen grid lg:grid-cols-2">
      {/* Left — form */}
      <div className="flex flex-col justify-center px-6 sm:px-10 py-10">
        <div className="w-full max-w-sm mx-auto">
          <div className="flex items-center gap-2 font-extrabold text-xl mb-8">
            <span className="h-9 w-9 rounded-lg bg-brand-600 text-white grid place-items-center">
              <ShieldHalf className="h-5 w-5" />
            </span>
            VerifyPack
          </div>
          <h1 className="text-2xl font-extrabold">{title}</h1>
          {subtitle && <p className="text-slate-500 mt-1 text-sm">{subtitle}</p>}
          <div className="mt-6">{children}</div>
        </div>
      </div>
      {/* Right — promo carousel */}
      <AuthCarousel />
    </div>
  );
}

export function Field({ label, ...props }: any) {
  return (
    <label className="block mb-4">
      <span className="text-sm font-medium text-slate-700">{label}</span>
      <input {...props}
        className="mt-1 w-full px-3 py-2.5 rounded-lg border border-slate-200 text-sm
                   focus:outline-none focus:ring-2 focus:ring-brand-500/30" />
    </label>
  );
}