/**
 * Progress bar component showing assessment progress.
 */

import { Progress, Typography, Space } from 'antd';

const { Text } = Typography;

interface ProgressBarProps {
  completed: number;
  total: number;
  label?: string;
}

export function ProgressBar({ completed, total, label }: ProgressBarProps) {
  const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;

  return (
    <div style={{ width: '100%' }}>
      {label && (
        <Space style={{ marginBottom: 4, justifyContent: 'space-between', width: '100%' }}>
          <Text type="secondary">{label}</Text>
          <Text type="secondary">
            {completed}/{total} ({percentage}%)
          </Text>
        </Space>
      )}
      <Progress
        percent={percentage}
        showInfo={!label}
        status="active"
        strokeColor={{
          '0%': '#108ee9',
          '100%': '#87d068',
        }}
      />
    </div>
  );
}
