'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/primitives/Grid';
import { Stack } from '@/ui/primitives/Stack';

/**
 * HomeStatsStrip - A thin strip showing some status or quick info.
 * Part of the "Telemetry-workspace" feel.
 * Refactored to use semantic HTML and Tailwind.
 */
export function HomeStatsStrip() {
  return (
    <Stack bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
      <Container>
        <Grid cols={2} mdCols={4} gap={0} borderLeft borderRight borderColor="border-gray/30">
          <MetricCard 
            label="Active Drivers" 
            value="1,284" 
            icon={Users} 
            trend={{ value: 12, isPositive: true }}
            border={false}
            bg="transparent"
          />
          <Stack borderLeft borderColor="border-gray/30">
            <MetricCard 
              label="Live Sessions" 
              value="42" 
              icon={Activity} 
              color="text-telemetry-aqua"
              border={false}
              bg="transparent"
            />
          </Stack>
          <Stack borderLeft borderColor="border-gray/30">
            <MetricCard 
              label="Total Races" 
              value="15,402" 
              icon={Trophy} 
              color="text-warning-amber"
              border={false}
              bg="transparent"
            />
          </Stack>
          <Stack borderLeft borderColor="border-gray/30">
            <MetricCard 
              label="Next Event" 
              value="14:00" 
              icon={Calendar} 
              border={false}
              bg="transparent"
            />
          </Stack>
        </Grid>
      </Container>
    </Stack>
  );
}