finanzas/components/budget/BudgetCard.tsx

'use client'

import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
import { cn, formatCurrency } from '@/lib/utils'

interface BudgetCardProps {
  label: string
  amount: number
  trend?: 'up' | 'down' | 'neutral'
  color?: string
}

export function BudgetCard({ label, amount, trend = 'neutral', color }: BudgetCardProps) {
  const getTrendIcon = () => {
    switch (trend) {
      case 'up':
        return <TrendingUp className="w-4 h-4 text-emerald-400" />
      case 'down':
        return <TrendingDown className="w-4 h-4 text-red-400" />
      default:
        return <Minus className="w-4 h-4 text-slate-500" />
    }
  }

  const getTrendText = () => {
    switch (trend) {
      case 'up':
        return <span className="text-emerald-400 text-xs">Positivo</span>
      case 'down':
        return <span className="text-red-400 text-xs">Negativo</span>
      default:
        return <span className="text-slate-500 text-xs">Neutral</span>
    }
  }

  const textColor = color || 'text-white'

  return (
    <div className="bg-slate-800 border border-slate-700/50 rounded-lg p-4">
      <div className="flex items-center justify-between">
        <p className="text-slate-400 text-sm">{label}</p>
        {getTrendIcon()}
      </div>
      <p className={cn('text-2xl font-mono font-semibold mt-2', textColor)}>
        {formatCurrency(amount)}
      </p>
      <div className="mt-2">{getTrendText()}</div>
    </div>
  )
}