import React from 'react';

interface StatCardProps {
  title: string;
  value: string | number;
  change?: number | null;
  changeLabel?: string;
  subtitle?: string | null;
}

function StatCard({ title, value, change = null, changeLabel = 'YoY', subtitle = null }: StatCardProps) {
  const isPositive = change !== null && change >= 0;
  
  return (
    <div className="stat-card">
      <h3>{title}</h3>
      <div className="stat-value">{value}</div>
      {subtitle && (
        <div className="stat-subtitle">{subtitle}</div>
      )}
      {change !== null && (
        <div className={`stat-change ${isPositive ? 'positive' : 'negative'}`}>
          <span className="stat-change-arrow">{isPositive ? '↑' : '↓'}</span>
          <span className="stat-change-value">{Math.abs(change).toFixed(1)}%</span>
          <span className="stat-change-label">{changeLabel}</span>
        </div>
      )}
    </div>
  );
}

export default StatCard;
