import { getTranslations, setRequestLocale } from "next-intl/server";
import type { ReactNode } from "react";
import { Link } from "@/i18n/navigation";
import { DashboardUserInfo } from "@/components/dashboard/dashboard-user-info";

interface DashboardLayoutProps {
  children: ReactNode;
  params: Promise<{ locale: string }>;
}

export default async function DashboardLayout({
  children,
  params,
}: DashboardLayoutProps) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("common");

  return (
    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
      <div className="mb-6 flex flex-col gap-4 border-b border-zinc-200 pb-6 dark:border-zinc-800 sm:flex-row sm:items-center sm:justify-between">
        <nav aria-label="Dashboard navigation">
          <ul className="flex gap-4 text-sm">
            <li>
              <Link
                href="/dashboard"
                className="font-medium text-zinc-900 dark:text-zinc-50"
                aria-current="page"
              >
                {t("dashboard")}
              </Link>
            </li>
          </ul>
        </nav>
        <DashboardUserInfo />
      </div>
      {children}
    </div>
  );
}