"use client" import { motion } from "framer-motion" import { Play, Trash2, Clock, Heart, Film, ListVideo, Plus, Search, MoreHorizontal, } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Avatar } from "@/components/ui/avatar" import { cn } from "@/lib/utils" import { fadeIn, stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const lists = [ { name: "Watch Later", count: 12 }, { name: "Favorites", count: 8 }, { name: "Currently Watching", count: 3 }, { name: "Completed", count: 24 }, ] const watchlistItems = [ { id: 1, title: "Inception", type: "Movie", added: "2 days ago", progress: "", priority: "High" }, { id: 2, title: "Stranger Things S5", type: "TV Show", added: "1 week ago", progress: "3/8 episodes", priority: "High" }, { id: 3, title: "The Matrix Resurrections", type: "Movie", added: "3 days ago", progress: "", priority: "Medium" }, { id: 4, title: "Dune: Part Two", type: "Movie", added: "1 day ago", progress: "", priority: "High" }, { id: 5, title: "The Last of Us S2", type: "TV Show", added: "2 weeks ago", progress: "1/9 episodes", priority: "Medium" }, { id: 6, title: "Oppenheimer", type: "Movie", added: "1 month ago", progress: "", priority: "Low" }, ] export default function Watchlist() { return (

My Watchlist

Track what you want to watch

{lists.map((list) => (

{list.name === "Favorites" ? : list.name === "Watch Later" ? : list.name === "Currently Watching" ? : }

{list.name}

{list.count}

))}

All Items

{watchlistItems.map((item) => (

{item.title}

{item.type} Added {item.added} {item.progress && • {item.progress}}

{item.priority} ))}

) }