"use client" import { useState } from "react" import { motion } from "framer-motion" import { Heart, ShoppingCart, Share2, Trash2, Star } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const wishlistItems = [ { id: 1, name: "Premium Wireless Headphones", price: 349.99, rating: 4.8, reviews: 234, inStock: true, image: "WH-1000XM5" }, { id: 2, name: "Mechanical Keyboard RGB", price: 179.99, rating: 4.6, reviews: 189, inStock: true, image: "KB-MK8" }, { id: 3, name: "Ultrawide Monitor 34\"", price: 799.99, rating: 4.7, reviews: 312, inStock: false, image: "UW-34" }, { id: 4, name: "Ergonomic Office Chair", price: 549.99, rating: 4.5, reviews: 156, inStock: true, image: "EC-PRO" }, { id: 5, name: "Smart Watch Pro", price: 399.99, rating: 4.4, reviews: 98, inStock: true, image: "SW-PRO" }, { id: 6, name: "Portable Bluetooth Speaker", price: 129.99, rating: 4.3, reviews: 67, inStock: true, image: "BS-PORT" }, ] export default function Wishlist() { const [items, setItems] = useState(wishlistItems) const removeItem = (id: number) => { setItems((prev) => prev.filter((i) => i.id !== id)) } return (

My Wishlist

{items.length} items saved.

{items.length} items {items.map((item) => (

{item.image}

{item.name}

{Array.from({ length: 5 }).map((_, i) => ( ))} ({item.reviews})

${item.price.toFixed(2)} {item.inStock ? "In Stock" : "Out of Stock"}

))} {items.length === 0 && (

Your wishlist is empty

Save items you love to find them later.

)}

) }