'use client';

import React from 'react';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';

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">
      <Box 
        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>
      </Box>
      <Text 
        size="xs" 
        color="text-gray-500" 
        uppercase 
        letterSpacing="widest"
        weight="medium"
      >
        Telemetry connection lost // Sector data unavailable
      </Text>
    </Stack>
  );
}