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

interface KpiItem {
  label: string;
  value: string | number;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
}

interface DashboardKpiRowProps {
  items: KpiItem[];
}

/**
 * DashboardKpiRow
 * 
 * A horizontal row of key performance indicators with telemetry styling.
 */
export function DashboardKpiRow({ items }: DashboardKpiRowProps) {
  return (
    <Grid cols={{ base: 2, md: 3, lg: 6 }} gap={4}>
      {items.map((item, index) => (
        <Card key={index} variant="dark">
          <Stack gap={1}>
            <Text 
              size="xs" 
              weight="bold" 
              uppercase 
              variant="low"
            >
              {item.label}
            </Text>
            <Text 
              size="xl" 
              font="mono" 
              weight="bold"
              variant={item.intent || 'high'}
            >
              {item.value}
            </Text>
          </Stack>
        </Card>
      ))}
    </Grid>
  );
}