'use client'

import { cn, formatCurrency } from '@/lib/utils'

interface BudgetProgressProps {
  current: number
  max: number
  label: string
  color?: string
}

export function BudgetProgress({ current, max, label, color }: BudgetProgressProps) {
  const percentage = max > 0 ? Math.min((current / max) * 100, 100) : 0

  const getColorClass = () => {
    if (color) return color
    if (percentage < 70) return 'bg-emerald-500'
    if (percentage < 90) return 'bg-amber-500'
    return 'bg-red-500'
  }

  return (
    <div className="w-full">
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm font-medium text-slate-300">{label}</span>
        <span className="text-sm text-slate-400">
          {formatCurrency(current)} <span className="text-slate-600">/ {formatCurrency(max)}</span>
        </span>
      </div>
      <div className="h-3 bg-slate-700 rounded-full overflow-hidden">
        <div
          className={cn('h-full rounded-full transition-all duration-500 ease-out', getColorClass())}
          style={{ width: `${percentage}%` }}
        />
      </div>
      <div className="flex justify-between mt-1">
        <span className="text-xs text-slate-500">{percentage.toFixed(0)}% usado</span>
        {percentage >= 100 && (
          <span className="text-xs text-red-400 font-medium">Límite alcanzado</span>
        )}
      </div>
    </div>
  )
}