'use client';

import React from 'react';
import { MetricCard } from '@/ui/MetricCard';
import { Activity, Users, Trophy, Calendar } from 'lucide-react';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';

/**
 * HomeStatsStrip - A thin strip showing some status or quick info.
 * Part of the "Telemetry-workspace" feel.
 */
export function HomeStatsStrip() {
  return (
    <Container>
      <Grid cols={{ base: 2, md: 4 }} gap={4}>
        <MetricCard 
          label="Active Drivers" 
          value="1,284" 
          icon={Users} 
          trend={{ value: 12, isPositive: true }}
        />
        <MetricCard 
          label="Live Sessions" 
          value="42" 
          icon={Activity} 
          intent="telemetry"
        />
        <MetricCard 
          label="Total Races" 
          value="15,402" 
          icon={Trophy} 
          intent="warning"
        />
        <MetricCard 
          label="Next Event" 
          value="14:00" 
          icon={Calendar} 
        />
      </Grid>
    </Container>
  );
}