import { Card, CardContent } from '../primitives';
import { cn } from '../lib/cn';
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';

interface KpiCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  trend?: 'up' | 'down' | 'neutral';
  trendValue?: string;
  icon?: React.ReactNode;
  className?: string;
  href?: string;
}

export function KpiCard({
  title,
  value,
  subtitle,
  trend,
  trendValue,
  icon,
  className,
  href,
}: KpiCardProps) {
  const formatValue = (val: string | number) => {
    if (typeof val === 'number') {
      return new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
      }).format(val);
    }
    return val;
  };

  const Wrapper = href ? 'a' : 'div';
  const wrapperProps = href ? { href, className: 'block' } : {};

  return (
    <Card className={cn(href && 'hover:border-primary/50 hover:shadow-md transition-all cursor-pointer', className)}>
      <Wrapper {...wrapperProps}>
      <CardContent className="p-6">
        <div className="flex items-center justify-between">
          <p className="text-sm font-medium text-muted-foreground">{title}</p>
          {icon && <div className="text-muted-foreground">{icon}</div>}
        </div>
        <div className="mt-2">
          <p className="text-2xl font-bold">{formatValue(value)}</p>
          {(subtitle || trend) && (
            <div className="mt-1 flex items-center gap-2">
              {trend && (
                <span
                  className={cn(
                    'flex items-center text-xs font-medium',
                    trend === 'up' && 'text-success',
                    trend === 'down' && 'text-destructive',
                    trend === 'neutral' && 'text-muted-foreground'
                  )}
                >
                  {trend === 'up' && <TrendingUp className="mr-1 h-3 w-3" />}
                  {trend === 'down' && <TrendingDown className="mr-1 h-3 w-3" />}
                  {trend === 'neutral' && <Minus className="mr-1 h-3 w-3" />}
                  {trendValue}
                </span>
              )}
              {subtitle && (
                <span className="text-xs text-muted-foreground">{subtitle}</span>
              )}
            </div>
          )}
        </div>
      </CardContent>
      </Wrapper>
    </Card>
  );
}