'use client';

import { Progress } from '@/components/ui/progress';
import { CheckCircle2, Circle } from 'lucide-react';
import { cn } from '@/lib/utils';

interface ModuleProgressProps {
  percentage: number;
  isCompleted?: boolean;
  showLabel?: boolean;
  className?: string;
}

export function ModuleProgress({
  percentage,
  isCompleted = false,
  showLabel = true,
  className,
}: ModuleProgressProps) {
  return (
    <div className={cn('space-y-2', className)}>
      <div className="flex items-center justify-between text-sm">
        {showLabel && (
          <span className="font-medium">Progreso</span>
        )}
        <div className="flex items-center gap-2">
          {isCompleted ? (
            <CheckCircle2 className="h-4 w-4 text-green-500" />
          ) : (
            <Circle className="h-4 w-4 text-muted-foreground" />
          )}
          <span className={cn('font-medium', isCompleted && 'text-green-500')}>
            {isCompleted ? 'Completado' : `${percentage}%`}
          </span>
        </div>
      </div>
      <Progress
        value={isCompleted ? 100 : percentage}
        className="h-2"
      />
    </div>
  );
}
