import type { ReactNode } from 'react';
import { Card } from './Card';

interface StatCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon: ReactNode;
  iconBgColor: string;
  valueColor: string;
  borderColor: string;
}

export function StatCard({
  title,
  value,
  subtitle,
  icon,
  iconBgColor,
  valueColor,
  borderColor,
}: StatCardProps) {
  return (
    <Card hover className={`p-4 hover:${borderColor}`}>
      <div className="flex items-center">
        <div className={`p-1.5 ${iconBgColor} rounded`}>{icon}</div>
        <div className="ml-3">
          <h3 className="text-sm font-medium text-text-primary">{title}</h3>
          <p className={`text-lg font-bold ${valueColor}`}>{value}</p>
          {subtitle && <p className="text-xs text-text-muted">{subtitle}</p>}
        </div>
      </div>
    </Card>
  );
}
