import { Suspense } from "react";
import Dashboard from "@/components/dashboard/dashboard";
import { Metadata, Viewport } from "next";
import PromotionsList from "@/components/dashboard/promotions/PromotionsList";
import PromotionsPageSkeleton from "@/components/dashboard/promotions/PromotionsPageSkeleton";
import { Ticket } from "lucide-react";

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

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: [
    { media: "(prefers-color-scheme: dark)", color: "#000000" },
    { media: "(prefers-color-scheme: light)", color: "#D53F8C" },
  ],
};

export default function PromotionsPage() {
  return (
    <Dashboard>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
            <Ticket className="mr-2 h-6 w-6" />
            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>
  );
}