import React from 'react';
import { Box } from './Box';
import { Text } from './Text';

interface TeamStatItemProps {
  label: string;
  value: string | number;
  color?: string;
  align?: 'left' | 'center' | 'right';
}

export function TeamStatItem({ label, value, color = 'text-white', align = 'left' }: TeamStatItemProps) {
  return (
    <Box 
      p={2} 
      rounded="lg" 
      bg="bg-iron-gray/30" 
      display="flex" 
      flexDirection="col" 
      alignItems={align === 'center' ? 'center' : align === 'right' ? 'end' : 'start'}
    >
      <Text size="xs" color="text-gray-500" block mb={0.5}>{label}</Text>
      <Text size="sm" weight="semibold" color={color}>{value}</Text>
    </Box>
  );
}