"use client"; import { motion } from "framer-motion"; import { ShoppingBag, Star, Heart, Eye, Check, Clock } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { useState } from "react"; import Image from "next/image"; export interface ProductCardProps { id: number; image: string; title: string; price: number; originalPrice?: number; category: string; rating: number; inStock?: boolean; isNew?: boolean; isFeatured?: boolean; discount?: number; colors?: string[]; } export default function ProductCard({ image, title, price, originalPrice, category, rating, inStock = true, isNew = false, isFeatured = false, discount, colors = ["#000000", "#FFFFFF", "#FF0000", "#0000FF"], }: ProductCardProps) { const [isWishlisted, setIsWishlisted] = useState(false); const [selectedColor, setSelectedColor] = useState(colors[0]); return ( {/* Badges */}

{isNew && ( New )} {discount && ( -{discount}% )} {isFeatured && ( Featured )}

{/* Wishlist button */} setIsWishlisted(!isWishlisted)} > {/* Image container */} {title}

{/* Overlay */} {/* Content */}

{category}

{rating.toFixed(1)}

{title}

{/* Stock status */}

{inStock ? (

In Stock

) : (

Ships in 2-3 weeks

)}

{/* Color options */}

Colors

{colors.map((color) => (

{/* Spacer to push price and button to bottom */}

${price.toFixed(2)} {originalPrice && ( ${originalPrice.toFixed(2)} )}

Free shipping

); }

Product Card

Nike Air Force 1

Install Dependencies