import React from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';

interface InfoItemProps {
  icon: LucideIcon;
  label: string;
  value: string | number;
}

export function InfoItem({ icon, label, value }: InfoItemProps) {
  return (
    <Box display="flex" alignItems="start" gap={2.5}>
      <Box 
        display="flex" 
        h="7" 
        w="7" 
        alignItems="center" 
        justifyContent="center" 
        rounded="lg" 
        bg="bg-iron-gray/60" 
        flexShrink={0}
      >
        <Icon icon={icon} size={3.5} color="text-gray-500" />
      </Box>
      <Box flexGrow={1} minWidth="0">
        <Text size="xs" color="text-gray-500" block mb={0.5} style={{ fontSize: '10px' }}>{label}</Text>
        <Text size="xs" weight="medium" color="text-gray-300" block className="truncate">
          {value}
        </Text>
      </Box>
    </Box>
  );
}