MetricsCard.tsx

/**
 * Metrics card component with Material-UI - displays a single metric value.
 */
import { Typography, Paper } from '@mui/material';

interface MetricsCardProps {
  title: string;
  value: number;
  unit?: string;
  decimals?: number;
  compact?: boolean;
}

export default function MetricsCard({
  title,
  value,
  unit,
  decimals = 0,
  compact = false,
}: MetricsCardProps) {
  const formattedValue = value.toFixed(decimals);

  if (compact) {
    return (
      <Paper variant="outlined" sx={{ p: 1.5, bgcolor: 'grey.50' }}>
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
          {title}
        </Typography>
        <Typography variant="body2" fontFamily="monospace" fontWeight={600}>
          {formattedValue}
          {unit && (
            <Typography component="span" variant="caption" color="text.secondary" sx={{ ml: 0.5 }}>
              {unit}
            </Typography>
          )}
        </Typography>
      </Paper>
    );
  }

  return (
    <Paper elevation={1} sx={{ p: 2 }}>
      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
        {title}
      </Typography>
      <Typography variant="h5" fontFamily="monospace" fontWeight="bold">
        {formattedValue}
        {unit && (
          <Typography component="span" variant="body2" color="text.secondary" sx={{ ml: 1 }}>
            {unit}
          </Typography>
        )}
      </Typography>
    </Paper>
  );
}