'use client';

import React from 'react';
import { StatsStrip } from '@/ui/StatsStrip';
import { Section } from '@/ui/Section';
import { XCircle, CheckCircle2, AlertCircle, ShieldCheck } from 'lucide-react';

/**
 * TelemetryStrip - Redesigned as a "Status of Chaos" vs "Status of Order" strip.
 * Focuses on the transition from manual work to GridPilot.
 */
export function TelemetryStrip() {
  const stats = [
    { 
      label: "NO SPREADSHEETS", 
      value: "STRUCTURED", 
      icon: CheckCircle2, 
      intent: "success" as const
    },
    { 
      label: "NO DM PROTESTS", 
      value: "CENTRALIZED", 
      icon: ShieldCheck, 
      intent: "primary" as const
    },
    { 
      label: "NO MANUAL POINTS", 
      value: "AUTOMATED", 
      icon: CheckCircle2, 
      intent: "success" as const
    },
    { 
      label: "NO ROSTER CHAOS", 
      value: "MANAGED", 
      icon: ShieldCheck, 
      intent: "primary" as const
    },
  ];

  return (
    <Section variant="default" padding="md">
      <StatsStrip stats={stats} />
    </Section>
  );
}