import React from 'react';
import { Container } from './Container';
import { Grid } from './Grid';
import { MetricCard } from './MetricCard';
import { LucideIcon } from 'lucide-react';

interface StatItem {
  label: string;
  value: string;
  icon: LucideIcon;
  intent?: 'primary' | 'telemetry' | 'warning' | 'success' | 'critical';
  trend?: {
    value: number;
    isPositive: boolean;
  };
}

interface StatsStripProps {
  stats: StatItem[];
}

/**
 * StatsStrip - A semantic UI component for showing a strip of metrics.
 */
export function StatsStrip({ stats }: StatsStripProps) {
  return (
    <Container>
      <Grid cols={{ base: 2, md: 4 }} gap={4}>
        {stats.map((stat, index) => (
          <MetricCard 
            key={index}
            label={stat.label} 
            value={stat.value} 
            icon={stat.icon} 
            intent={stat.intent as any}
            trend={stat.trend}
          />
        ))}
      </Grid>
    </Container>
  );
}