import type { ReactNode } from 'react';
import { TrendingUp, TrendingDown } from 'lucide-react';
import { InfoTip } from './InfoTip';

interface StatCardProps {
  label: string;
  value: string | number;
  icon: ReactNode;
  trend?: number | null;
  subtitle?: string;
  /** Shown next to the label as an info icon with tooltip */
  info?: string;
  className?: string;
}

export function StatCard({
  label,
  value,
  icon,
  trend,
  subtitle,
  info,
  className = '',
}: StatCardProps) {
  return (
    <div
      className={`bg-white border border-gray-100 rounded-xl p-5 card-surface card-hover ${className}`}
    >
      <div className="flex items-start justify-between mb-3">
        <div className="flex items-center gap-1 min-w-0 pr-2">
          <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">
            {label}
          </span>
          {info ? <InfoTip text={info} /> : null}
        </div>
        <span className="p-2 rounded-lg bg-gray-50 text-gray-400">
          {icon}
        </span>
      </div>
      <div className="flex items-end gap-2">
        <span className="text-2xl font-semibold text-gray-900">{value}</span>
        {trend != null && (
          <span
            className={`flex items-center gap-0.5 text-xs font-medium mb-0.5 ${
              trend >= 0 ? 'text-emerald-600' : 'text-red-600'
            }`}
          >
            {trend >= 0 ? (
              <TrendingUp className="h-3 w-3" />
            ) : (
              <TrendingDown className="h-3 w-3" />
            )}
            {Math.abs(trend).toFixed(1)}%
          </span>
        )}
      </div>
      {subtitle && (
        <p className="text-xs text-gray-400 mt-1">{subtitle}</p>
      )}
    </div>
  );
}
