import Image from 'next/image';
import { Logo } from '@/components/ui/Logo';
import { LanguageSwitcher } from '@/components/layout/LanguageSwitcher';
import { getMessages } from '@/i18n/server';

export default async function AuthLayout({ children }: { children: React.ReactNode }) {
  const t = (await getMessages()).auth;
  return (
    <main className="grid min-h-dvh bg-canvas lg:grid-cols-[1fr_minmax(480px,560px)]">
      <aside className="relative hidden overflow-hidden bg-night-950 lg:block">
        <Image
          src="/images/hero_profile.jpg"
          alt=""
          fill
          preload
          sizes="60vw"
          className="-scale-x-100 object-cover object-[30%_30%] opacity-90"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-night-950 via-night-950/30 to-night-950/40" />
        <div className="relative flex h-full flex-col justify-between p-12 text-white">
          <Logo />
          <div className="max-w-md">
            <p className="eyebrow text-white/60">{t.sideEyebrow}</p>
            <p className="mt-5 text-[32px] leading-[1.15] font-semibold tracking-[-0.02em]">
              {t.sideText}
            </p>
          </div>
        </div>
      </aside>

      <div className="flex flex-col px-5 py-8 sm:px-12">
        <div className="flex items-center justify-between gap-4 lg:justify-end">
          <div className="lg:hidden">
            <Logo tone="dark" />
          </div>
          <LanguageSwitcher tone="dark" />
        </div>
        <div className="mx-auto flex w-full max-w-[380px] flex-1 flex-col justify-center py-12">{children}</div>
      </div>
    </main>
  );
}