import React from 'react';

interface StatCardProps {
  label: string;
  value: string | number;
  subValue?: string;
  icon?: React.ReactNode;
  trend?: {
    positive: boolean;
    text: string;
  };
  className?: string;
}

export const StatCard: React.FC<StatCardProps> = ({
  label,
  value,
  subValue,
  icon,
  trend,
  className = '',
}) => {
  return (
    <div
      className={`bg-zinc-900/90 border border-zinc-800/80 rounded-xl p-5 flex flex-col justify-between shadow-sm hover:border-zinc-700/80 transition-all ${className}`}
    >
      <div className="flex items-center justify-between">
        <span className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
          {label}
        </span>
        {icon && <div className="text-zinc-400 bg-zinc-800/60 p-2 rounded-lg">{icon}</div>}
      </div>
      <div className="mt-4 flex items-baseline gap-2">
        <span className="text-2xl sm:text-3xl font-bold font-mono tracking-tight text-white">
          {value}
        </span>
        {subValue && <span className="text-xs text-zinc-400">{subValue}</span>}
      </div>
      {trend && (
        <div className="mt-2 text-xs flex items-center gap-1 font-medium">
          <span className={trend.positive ? 'text-emerald-400' : 'text-rose-400'}>
            {trend.positive ? '↑' : '↓'} {trend.text}
          </span>
        </div>
      )}
    </div>
  );
};