KLC-Learners-Portal-Frontend-Figmamake/src/pages/learner/RecentActivity.tsx

import { 
  CheckCircle, 
  Video, 
  FileText, 
  Award, 
  PlayCircle, 
  MessageSquare, 
  BookOpen, 
  Users, 
  Activity 
} from "lucide-react";

import { useNavigate } from "react-router-dom";
import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card";
import { Button } from "../../components/ui/button";
import { ScrollArea } from "../../components/ui/scroll-area";
// import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
// import { Button } from "@/components/ui/button";
// import { ScrollArea } from "@/components/ui/scroll-area";

// Recent Activity component - increased height to match Global Leaderboard
export function RecentActivity() {
  const activities = [
    {
      id: 1,
      type: 'course_completed',
      title: 'Completed "Strategic Decision Making"',
      description: 'Module 3 of 4 • Leadership Fundamentals',
      timestamp: '2 hours ago',
      icon: CheckCircle,
      iconColor: 'text-green-600',
      iconBg: 'bg-green-100'
    },
    {
      id: 2,
      type: 'webinar_joined',
      title: 'Attended Live Webinar',
      description: 'Digital Transformation for Leaders',
      timestamp: '5 hours ago',
      icon: Video,
      iconColor: 'text-blue-600',
      iconBg: 'bg-blue-100'
    },
    {
      id: 3,
      type: 'assessment_completed',
      title: 'Assessment Completed',
      description: 'Leadership Style Assessment • Score: 92%',
      timestamp: '1 day ago',
      icon: FileText,
      iconColor: 'text-purple-600',
      iconBg: 'bg-purple-100'
    },
    {
      id: 4,
      type: 'certificate_earned',
      title: 'Certificate Earned',
      description: 'Leadership Foundation Certification',
      timestamp: '2 days ago',
      icon: Award,
      iconColor: 'text-brand-gold',
      iconBg: 'bg-yellow-100'
    },
    {
      id: 5,
      type: 'course_started',
      title: 'Started New Course',
      description: 'Innovation Leadership Track',
      timestamp: '3 days ago',
      icon: PlayCircle,
      iconColor: 'text-green-600',
      iconBg: 'bg-green-100'
    },
    {
      id: 6,
      type: 'discussion_posted',
      title: 'Discussion Contribution',
      description: 'Team Management Best Practices',
      timestamp: '4 days ago',
      icon: MessageSquare,
      iconColor: 'text-orange-600',
      iconBg: 'bg-orange-100'
    },
    {
      id: 7,
      type: 'resource_downloaded',
      title: 'Resource Downloaded',
      description: 'Leadership Skills Handbook PDF',
      timestamp: '5 days ago',
      icon: BookOpen,
      iconColor: 'text-gray-600',
      iconBg: 'bg-gray-100'
    },
    {
      id: 8,
      type: 'peer_connection',
      title: 'New Connection',
      description: 'Connected with 3 peer learners',
      timestamp: '1 week ago',
      icon: Users,
      iconColor: 'text-brand-navy',
      iconBg: 'bg-blue-100'
    }
  ];
  const navigate = useNavigate();
  return (
    <Card className="h-96 flex flex-col border-0 shadow-lg bg-white">
      <CardHeader className="pb-3 flex-shrink-0">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-gradient-to-br from-brand-navy to-brand-navy/90 rounded-lg flex items-center justify-center">
              <Activity className="h-4 w-4 text-white" />
            </div>
            <CardTitle className="text-lg font-semibold text-gray-900">
              Recent Activity
            </CardTitle>
          </div>
          <Button 
            variant="outline"
            size="sm"
            onClick={() => navigate('/dashboard?view=individual&tab=activity')}
            className="text-brand-navy hover:bg-brand-navy/10 border-brand-navy/20 text-base px-3 py-1.5 min-h-[48px] font-medium"
          >
            View All
          </Button>
        </div>
        <p className="text-sm text-gray-600 mt-1">
          Your recent learning activities
        </p>
      </CardHeader>
      
      <CardContent className="px-6 pb-4 flex-1 min-h-0">
        <ScrollArea className="h-full">
          <div className="space-y-2 pr-2">
            {activities.map((activity) => {
              const Icon = activity.icon;
              return (
                <div 
                  key={activity.id}
                  className="flex items-start gap-3 p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-all duration-200"
                >
                  {/* Activity Icon */}
                  <div className={`p-2 rounded-lg ${activity.iconBg} flex-shrink-0`}>
                    <Icon className={`h-3 w-3 ${activity.iconColor}`} />
                  </div>
                  
                  {/* Activity Content */}
                  <div className="flex-1 min-w-0">
                    <h4 className="text-sm font-semibold text-gray-900 mb-1 leading-tight">
                      {activity.title}
                    </h4>
                    <p className="text-xs text-gray-600 mb-1 leading-relaxed">
                      {activity.description}
                    </p>
                    <p className="text-xs text-gray-500 font-medium">
                      {activity.timestamp}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
}