'use client';

import React from 'react';
import Card from './Card';

interface StatCardProps {
  icon: React.ElementType;
  label: string;
  value: string;
  subValue?: string;
  color?: string;
  bgColor?: string;
  trend?: {
    value: number;
    isPositive: boolean;
  };
}

/**
 * Statistics card component for displaying metrics with icon, label, value, and optional trend.
 * Used in dashboards and overview sections.
 */
export default function StatCard({ 
  icon: Icon, 
  label, 
  value, 
  subValue,
  color = 'text-primary-blue',
  bgColor = 'bg-primary-blue/10',
  trend,
}: StatCardProps) {
  return (
    <Card className="p-5">
      <div className="flex items-start justify-between">
        <div>
          <div className="flex items-center gap-2 mb-2">
            <div className={`p-2 rounded-lg ${bgColor}`}>
              <Icon className={`w-4 h-4 ${color}`} />
            </div>
            <span className="text-sm text-gray-400">{label}</span>
          </div>
          <div className="text-2xl font-bold text-white">{value}</div>
          {subValue && (
            <div className="text-xs text-gray-500 mt-1">{subValue}</div>
          )}
        </div>
        {trend && (
          <div className={`flex items-center gap-1 text-sm ${trend.isPositive ? 'text-performance-green' : 'text-racing-red'}`}>
            <span>{trend.isPositive ? '↑' : '↓'}</span>
            <span>{Math.abs(trend.value)}%</span>
          </div>
        )}
      </div>
    </Card>
  );
}