import Card from 'react-bootstrap/Card';

interface StatCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  color?: string;
  onClick?: () => void;
}

function StatCard({ title, value, subtitle, color = '#4a90d9', onClick }: StatCardProps) {
  return (
    <Card className={`stat-card h-100${onClick ? ' clickable-row' : ''}`} onClick={onClick} style={onClick ? { cursor: 'pointer' } : undefined}>
      <Card.Body className="text-center">
        <Card.Subtitle className="mb-2 text-muted-custom">{title}</Card.Subtitle>
        <Card.Title className="stat-value" style={{ color }}>
          {value}
        </Card.Title>
        {subtitle && <small className="text-muted-custom">{subtitle}</small>}
      </Card.Body>
    </Card>
  );
}

export default StatCard;
