'use client'

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

interface MetricCardProps {
  title: string
  amount: number
  subtitle?: string
  trend?: {
    value: number
    isPositive: boolean
  }
  icon: LucideIcon
  color?: string
}

export function MetricCard({
  title,
  amount,
  subtitle,
  trend,
  icon: Icon,
  color = 'text-emerald-400',
}: MetricCardProps) {
  return (
    <div className="relative overflow-hidden rounded-xl border border-slate-700 bg-slate-800 p-6 shadow-lg">
      {/* Icono en esquina superior derecha */}
      <div className={cn('absolute right-4 top-4', color)}>
        <Icon className="h-10 w-10 opacity-80" />
      </div>

      {/* Contenido */}
      <div className="relative">
        {/* Título */}
        <h3 className="text-sm font-medium text-slate-400">{title}</h3>

        {/* Monto */}
        <p className="mt-2 font-mono text-3xl font-bold text-emerald-400">
          {formatCurrency(amount)}
        </p>

        {/* Subtítulo */}
        {subtitle && (
          <p className="mt-1 text-sm text-slate-500">{subtitle}</p>
        )}

        {/* Indicador de tendencia */}
        {trend && (
          <div className="mt-3 flex items-center gap-1.5">
            {trend.isPositive ? (
              <>
                <TrendingUp className="h-4 w-4 text-emerald-500" />
                <span className="text-sm font-medium text-emerald-500">
                  +{trend.value}%
                </span>
              </>
            ) : (
              <>
                <TrendingDown className="h-4 w-4 text-rose-500" />
                <span className="text-sm font-medium text-rose-500">
                  -{trend.value}%
                </span>
              </>
            )}
            <span className="text-sm text-slate-500">vs mes anterior</span>
          </div>
        )}
      </div>
    </div>
  )
}