frontend/src/components/learning-paths/PathCard.tsx

// src/components/learning-paths/PathCard.tsx
import React from 'react';
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { useLearning } from '../../contexts/LearningContext';
import { useUser } from '../../contexts/UserContext';

const PathCard = ({ path }) => {
  const { setCurrentPath } = useLearning();
  const { user } = useUser();

  const completedModules = path.modules.filter(module => 
    user.progress.completedModules.includes(module.id)
  ).length;

  const progress = (completedModules / path.modules.length) * 100;

  return (
    <Card className="hover:shadow-lg transition-shadow duration-300">
      <CardHeader>
        <CardTitle>{path.name}</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-gray-600 mb-4">{path.description}</p>
        <div className="space-y-4">
          <div className="flex justify-between text-sm text-gray-600">
            <span>{completedModules} / {path.modules.length} modules</span>
            <span>{Math.round(progress)}% complete</span>
          </div>
          <Progress value={progress} className="h-2" />
          <button
            onClick={() => setCurrentPath(path.id)}
            className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 
                     transition-colors duration-300"
          >
            Continue Learning
          </button>
        </div>
      </CardContent>
    </Card>
  );
};

export default PathCard;