import type { PropsWithChildren } from 'react';

type OnboardingLayoutProps = PropsWithChildren<{
  title: string;
  description: string;
}>;

export function OnboardingLayout({ title, description, children }: OnboardingLayoutProps) {
  return (
    <main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-3 sm:px-6">
      <section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
        <h1 className="mb-2 text-2xl font-semibold">{title}</h1>
        <p className="mb-4 text-sm text-muted-foreground">{description}</p>
        {children}
      </section>
    </main>
  );
}
