import { Metadata } from 'next';
import { Suspense } from 'react';
import { UserDashboardView } from '@/components/dashboard/UserDashboardView';

interface DashboardPageProps {
  params: Promise<{
    locale: string;
  }>;
}

export async function generateMetadata({
  params,
}: DashboardPageProps): Promise<Metadata> {
  const { locale } = await params;
  const isAr = locale === 'ar';

  return {
    title: isAr ? 'لوحة التحكم وحجوزاتي | ShineCode دبي' : 'My Bookings & Dashboard | ShineCode Dubai',
    description: isAr
      ? 'تتبعي حجوزاتك النشطة، اطلعي على الإيصالات السابقة وأديري مواعيد جلساتك في دبي.'
      : 'Track your upcoming luxury at-home treatments, view itemized receipts, and manage your bookings in Dubai.',
  };
}

export default async function DashboardPage({ params }: DashboardPageProps) {
  const { locale } = await params;

  return (
    <Suspense fallback={<div className="min-h-screen bg-zinc-50 dark:bg-zinc-950 flex items-center justify-center text-sm font-semibold text-zinc-400">Loading Dashboard...</div>}>
      <UserDashboardView locale={locale} />
    </Suspense>
  );
}