import Link from "next/link";

export function AuthLayout({
  locale,
  title,
  subtitle,
  children
}: {
  locale: string;
  title: string;
  subtitle: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-ink-50/40 px-4">
      <div className="w-full max-w-sm">
        <Link href={`/${locale}`} className="mb-8 flex items-center justify-center gap-2">
          <div className="h-6 w-6 rounded-lg bg-brand-600" />
          <span className="text-base font-semibold text-ink-900">Tidyly</span>
        </Link>
        <div className="rounded-2xl border border-ink-100 bg-white p-6 shadow-card">
          <h1 className="text-lg font-semibold text-ink-900">{title}</h1>
          <p className="mt-1 text-sm text-ink-500">{subtitle}</p>
          <div className="mt-6">{children}</div>
        </div>
      </div>
    </div>
  );
}