"use client";

import { Progress } from "@/components/ui/progress";

interface OverallProgressBarProps {
  progress: number;
}

/** 전체 진행률 바 */
export function OverallProgressBar({ progress }: OverallProgressBarProps) {
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-muted-foreground">
          전체 진행률
        </span>
        <span className="text-sm font-bold">{Math.round(progress)}%</span>
      </div>
      <Progress
        value={progress}
        className="h-3"
        indicatorClassName={
          progress >= 100
            ? "bg-green-500"
            : progress > 0
              ? "bg-blue-500"
              : "bg-gray-300"
        }
      />
    </div>
  );
}