Bob AI: Modify the ProductCardOne component to add a background vide

src/components/sections/product/ProductCardOne.tsx

@@ -8,6 +8,7 @@ import ProductImage from "@/components/shared/ProductImage";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import { useProducts } from "@/hooks/useProducts";
+import { useRef, useEffect } from "react";
 import type { Product } from "@/lib/api/product";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
@@ -52,6 +53,8 @@ interface ProductCardOneProps {
     textBoxButtonContainerClassName?: string;
     textBoxButtonClassName?: string;
     textBoxButtonTextClassName?: string;
+    backgroundVideoUrl?: string;
+    showBackgroundVideo?: boolean;
 }
 
 interface ProductCardItemProps {
@@ -72,7 +75,7 @@ const ProductCardItem = memo(({
     cardPriceClassName = "",
 }: ProductCardItemProps) => {
     return (
-        <article
+        <article className="relative overflow-hidden"
             className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
             onClick={product.onProductClick}
             role="article"