create banner

src/components/home/TopSellingCarousel.tsx

@@ -1,9 +1,10 @@
 import { Carousel } from "@/components/ui/Carousel";
 import { ProductCard } from "@/components/ui/ProductCard";
 import { SectionTitle } from "@/components/ui/SectionTitle";
-import { topSellingProducts } from "@/data/sample";
+import { EmptyState } from "@/components/ui/EmptyState";
+import type { Product } from "@/lib/meshkee";
 
-export function TopSellingCarousel() {
+export function TopSellingCarousel({ products }: { products: Product[] }) {
   return (
     <section className="py-10 md:py-14">
       <div className="mx-auto max-w-7xl px-4">
@@ -12,17 +13,21 @@ export function TopSellingCarousel() {
           enTitle="Top Selling"
           action="مشاهده همه"
         />
-        <Carousel ariaLabel="کاروسل پرفروش‌ترین‌ها">
-          {topSellingProducts.map((product) => (
-            <ProductCard
-              key={product.id}
-              name={product.name}
-              brand={product.brand}
-              price={product.price}
-              image={product.image}
-            />
-          ))}
-        </Carousel>
+        {products.length === 0 ? (
+          <EmptyState message="هنوز محصولی ثبت نشده است." />
+        ) : (
+          <Carousel ariaLabel="کاروسل پرفروش‌ترین‌ها">
+            {products.map((product) => (
+              <ProductCard
+                key={product.id}
+                name={product.name}
+                brand={product.brand ?? ""}
+                price={product.price}
+                image={product.image ?? "/images/placeholder.svg"}
+              />
+            ))}
+          </Carousel>
+        )}
       </div>
     </section>
   );