'use client';

import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';

interface NotFoundDiagnosticsProps {
  errorCode: string;
}

/**
 * NotFoundDiagnostics
 * 
 * Semantic component for displaying technical error details.
 * Styled as a telemetry status indicator.
 */
export function NotFoundDiagnostics({ errorCode }: NotFoundDiagnosticsProps) {
  return (
    <Group direction="column" gap={3} align="center">
      <Badge variant="primary" size="md">
        {errorCode}
      </Badge>
      <Text 
        size="xs" 
        variant="low" 
        uppercase 
        weight="medium"
        align="center"
      >
        Telemetry connection lost // Sector data unavailable
      </Text>
    </Group>
  );
}