/**
 * 进度条组件
 */

import { Progress } from '@/components/ui/progress';
import { cn } from '@/lib/utils';
import type { ComponentPropsMap, RenderContext } from '../types';

interface ProgressBarProps {
  props: ComponentPropsMap['progress_bar'];
  context: RenderContext;
}

export function ProgressBar({ props }: ProgressBarProps) {
  const { label, value, max, showPercentage = true, color = 'default' } = props;
  const safeMax = max > 0 ? max : 1;
  const percentage = Math.min(100, Math.round((value / safeMax) * 100));

  const colorClass = {
    default: '[&>div]:bg-primary',
    success: '[&>div]:bg-emerald-500',
    warning: '[&>div]:bg-amber-500',
    error:   '[&>div]:bg-rose-500',
  };

  return (
    <div className="space-y-2">
      <div className="flex items-baseline justify-between gap-2">
        <span className="text-sm font-medium text-foreground">{label}</span>
        <span className="text-xs text-muted-foreground tabular-nums">
          {showPercentage ? `${percentage}%` : `${value} / ${max}`}
        </span>
      </div>
      <Progress
        value={percentage}
        className={cn('h-2 bg-muted/60', colorClass[color])}
      />
    </div>
  );
}
