// src/components/learning-paths/ModuleList.tsx
import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { useUser } from '../../contexts/UserContext';

const ModuleList = ({ modules }) => {
  const { user, updateProgress } = useUser();

  return (
    <div className="space-y-4">
      {modules.map((module) => {
        const isCompleted = user.progress.completedModules.includes(module.id);
        
        return (
          <Card key={module.id} className="relative">
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center
                              ${isCompleted ? 'bg-green-500' : 'bg-gray-200'}`}>
                  {isCompleted ? '✓' : module.order}
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold">{module.name}</h3>
                  <p className="text-sm text-gray-600">{module.description}</p>
                </div>
                <button
                  onClick={() => updateProgress(module.id)}
                  disabled={isCompleted}
                  className={`px-4 py-2 rounded ${
                    isCompleted 
                      ? 'bg-gray-200 text-gray-600' 
                      : 'bg-blue-500 text-white hover:bg-blue-600'
                  }`}
                >
                  {isCompleted ? 'Completed' : 'Start'}
                </button>
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
};

export default ModuleList;