'use client';

import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';

interface NotFoundDiagnosticsProps {
  errorCode: string;
}

/**
 * NotFoundDiagnostics
 * 
 * Semantic component for displaying technical error details.
 * Styled as a telemetry status indicator.
 */
export function NotFoundDiagnostics({ errorCode }: NotFoundDiagnosticsProps) {
  return (
    <Stack gap={3} align="center">
      <Stack 
        px={3} 
        py={1} 
        border 
        borderColor="primary-accent" 
        bg="primary-accent" 
        bgOpacity={0.1}
        rounded="sm"
      >
        <Text 
          size="xs" 
          weight="bold" 
          color="text-primary-accent"
          uppercase
          letterSpacing="widest"
        >
          {errorCode}
        </Text>
      </Stack>
      <Text 
        size="xs" 
        color="text-gray-500" 
        uppercase 
        letterSpacing="widest"
        weight="medium"
      >
        Telemetry connection lost // Sector data unavailable
      </Text>
    </Stack>
  );
}