import React from 'react';
import { Column, Row, Text } from '@react-email/components';
import { theme } from '../theme';
import { Card } from './Card';

export interface Metric {
  label: string;
  value: string;
}

interface MetricGridProps {
  metrics: Metric[];
}

export const MetricGrid = ({ metrics }: MetricGridProps) => (
  <Card>
    <Row>
      {metrics.map((metric) => (
        <Column key={metric.label} style={col}>
          <Text style={value}>{metric.value}</Text>
          <Text style={label}>{metric.label}</Text>
        </Column>
      ))}
    </Row>
  </Card>
);

const col = {
  padding: '8px',
  textAlign: 'center' as const,
};

const value = {
  color: theme.colors.forest,
  fontSize: '20px',
  fontWeight: 700,
  margin: '0 0 4px',
};

const label = {
  color: theme.colors.muted,
  fontSize: '12px',
  margin: 0,
};