import { Suspense } from "react";
import Dashboard from "@/components/dashboard/dashboard";
import { Metadata } from "next";
import PromotionsList from "@/components/dashboard/promotions/PromotionsList";
import PromotionsPageSkeleton from "@/components/dashboard/promotions/PromotionsPageSkeleton";

export const metadata: Metadata = {
  title: "Promotions | Ember Market",
  description: "Manage promotion codes for your store on Ember Market"
};

export default function PromotionsPage() {
  return (
    <Dashboard>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold">Promotions</h1>
          <p className="mt-1 text-muted-foreground">
            Create and manage promotional codes and discounts for your store
          </p>
        </div>
        
        <Suspense fallback={<PromotionsPageSkeleton />}>
          <PromotionsList />
        </Suspense>
      </div>
    </Dashboard>
  );
}