import { useLanguage } from '../i18n/LanguageContext'

export default function BudgetBar({ budget, spent, height = 'h-1.5' }) {
  const { currencySymbol } = useLanguage()
  if (!budget || budget <= 0) return null
  const pct = Math.min((spent / budget) * 100, 100)

  let color = 'bg-emerald-500'
  if (pct > 90) color = 'bg-red-500'
  else if (pct > 70) color = 'bg-amber-500'

  return (
    <div className="w-full">
      <div className="flex justify-between text-[10px] text-text-tertiary mb-0.5">
        <span>{(spent || 0).toLocaleString()} {currencySymbol} spent</span>
        <span>{budget.toLocaleString()} {currencySymbol}</span>
      </div>
      <div className={`${height} bg-surface-tertiary rounded-full overflow-hidden`}>
        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
      </div>
    </div>
  )
}