import { ReactNode } from "react";

type Props = {
  title: string;
  subtitle: string;
  children: ReactNode;
};

export function AuthShell({ title, subtitle, children }: Props) {
  return (
    <div className="mx-auto grid min-h-[calc(100vh-73px)] max-w-6xl grid-cols-1 md:grid-cols-[0.86fr_1fr]">
      <div className="relative hidden flex-col justify-between overflow-hidden bg-gradient-to-br from-accent to-accent-2 p-14 text-white md:flex">
        <div className="pointer-events-none absolute -left-24 -top-24 h-96 w-96 rounded-full bg-white/10" />
        <div className="pointer-events-none absolute -bottom-32 -right-16 h-[420px] w-[420px] rounded-full bg-white/[0.07]" />

        <div />

        <div className="relative">
          <h1 className="text-[36px] leading-[1.15]">
            Yeni Sohbetler
            <br />
            Seni Bekliyor.
          </h1>
          <p className="mt-4 max-w-sm text-[14.5px] leading-relaxed text-white/85">
            Profilini oluştur, kendini anlat, yeni sohbetlere başla.
          </p>
        </div>

        <div className="relative text-[12.5px] text-white/70">© 2026 SohbeteGir.com</div>
      </div>

      <div className="flex items-center justify-center px-6 py-14">
        <div className="w-full max-w-sm">
          <h2 className="text-[23px]">{title}</h2>
          <p className="mb-7 mt-1.5 text-[13.5px] text-text-muted">{subtitle}</p>
          {children}
        </div>
      </div>
    </div>
  );
}