import { Grid } from '@/ui/primitives/Grid';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';

interface KpiItem {
  label: string;
  value: string | number;
  color?: string;
}

interface DashboardKpiRowProps {
  items: KpiItem[];
}

/**
 * DashboardKpiRow
 * 
 * A horizontal row of key performance indicators with telemetry styling.
 * Uses UI primitives to comply with architectural constraints.
 */
export function DashboardKpiRow({ items }: DashboardKpiRowProps) {
  return (
    <Grid responsiveGridCols={{ base: 2, md: 3, lg: 6 }} gap={4}>
      {items.map((item, index) => (
        <Stack key={index} borderLeft pl={4} borderColor="var(--color-outline)">
          <Text 
            size="xs" 
            weight="bold" 
            uppercase 
            letterSpacing="tighter" 
            color="var(--color-text-low)"
            block
          >
            {item.label}
          </Text>
          <Text 
            size="xl" 
            font="mono" 
            weight="bold"
            color={item.color || 'var(--color-text-high)'}
          >
            {item.value}
          </Text>
        </Stack>
      ))}
    </Grid>
  );
}