"use client" import { useState } from "react" import { motion } from "framer-motion" import { BookOpen, PlayCircle, Award, Clock, Filter } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { Separator } from "@/components/ui/separator" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const courses = [ { id: 1, title: "React Fundamentals", provider: "Frontend Masters", duration: "8h 30m", progress: 75, category: "Engineering", enrolled: true, completed: false }, { id: 2, title: "TypeScript Deep Dive", provider: "Udemy", duration: "12h", progress: 30, category: "Engineering", enrolled: true, completed: false }, { id: 3, title: "Leadership Essentials", provider: "Coursera", duration: "4h", progress: 100, category: "Management", enrolled: true, completed: true }, { id: 4, title: "Cloud Architecture on AWS", provider: "AWS Training", duration: "16h", progress: 0, category: "Engineering", enrolled: false, completed: false }, { id: 5, title: "Data Privacy & Compliance", provider: "Internal", duration: "2h", progress: 0, category: "Compliance", enrolled: false, completed: false }, { id: 6, title: "Effective Communication", provider: "LinkedIn Learning", duration: "3h", progress: 60, category: "Soft Skills", enrolled: true, completed: false }, { id: 7, title: "UI/UX Design Principles", provider: "Figma Academy", duration: "6h", progress: 100, category: "Design", enrolled: true, completed: true }, { id: 8, title: "Agile & Scrum Mastery", provider: "Scrum.org", duration: "10h", progress: 0, category: "Management", enrolled: false, completed: false }, ] export default function Training() { const [activeTab, setActiveTab] = useState("in-progress") const filtered = courses.filter((c) => { if (activeTab === "in-progress") return c.enrolled && !c.completed if (activeTab === "completed") return c.completed if (activeTab === "available") return !c.enrolled return true }) return (

Training & Learning

Develop your skills with curated courses.

2 completed In Progress ({courses.filter((c) => c.enrolled && !c.completed).length}) Completed ({courses.filter((c) => c.completed).length}) Available ({courses.filter((c) => !c.enrolled).length}) All ({courses.length}) {["in-progress", "completed", "available", "all"].map((tab) => ( {courses .filter((c) => { if (tab === "all") return true if (tab === "in-progress") return c.enrolled && !c.completed if (tab === "completed") return c.completed if (tab === "available") return !c.enrolled return true }) .map((course) => (

{course.title} {course.provider}

{course.duration}

{course.enrolled && (

{course.progress}% complete {course.completed && }

)} ))} ))}

) }