'use client'

import { progressColor } from '@/lib/utils'

interface ProgressBarProps {
  value: number
  showLabel?: boolean
  height?: number
}

export function ProgressBar({ value, showLabel = true, height = 5 }: ProgressBarProps) {
  const color = progressColor(value)
  return (
    <div>
      {showLabel && (
        <div className="flex justify-between text-[11px] text-gray-400 mb-1.5">
          <span>Progress</span>
          <span style={{ color }} className="font-semibold">{value}%</span>
        </div>
      )}
      <div
        className="w-full bg-gray-150 rounded-full overflow-hidden"
        style={{ height }}
      >
        <div
          className="h-full rounded-full progress-fill"
          style={{ width: `${value}%`, background: `linear-gradient(90deg, ${color}, ${color}dd)` }}
        />
      </div>
    </div>
  )
}