import Link from 'next/link';
import type { ReactNode } from 'react';
import { SiteShell } from '@/components/site/site-shell';
import { getLocale, t } from '@/lib/i18n';

export async function LegalShell({
  title,
  children
}: {
  title: string;
  children: ReactNode;
}) {
  const locale = await getLocale();

  return (
    <SiteShell>
      <div className="mx-auto grid w-full max-w-[1200px] gap-8 px-6 py-12 lg:grid-cols-[220px_1fr]">
        <aside className="space-y-2 text-sm">
          <p className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            {t(locale, 'legal.navTitle')}
          </p>
          <Link href="/impressum" className="block rounded-md px-2 py-1.5 hover:bg-accent">
            {t(locale, 'legal.impressum.title')}
          </Link>
          <Link href="/privacy" className="block rounded-md px-2 py-1.5 hover:bg-accent">
            {t(locale, 'legal.privacy.title')}
          </Link>
          <Link href="/terms" className="block rounded-md px-2 py-1.5 hover:bg-accent">
            {t(locale, 'legal.terms.title')}
          </Link>
        </aside>
        <article className="space-y-6">
          <h1 className="text-3xl font-semibold">{title}</h1>
          {children}
        </article>
      </div>
    </SiteShell>
  );
}