import React from 'react';
import { Surface } from '@/ui/Surface';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';

interface TelemetryPanelProps {
  title: string;
  children: React.ReactNode;
}

/**
 * TelemetryPanel
 * 
 * A dense, instrument-grade panel for displaying data and controls.
 * Uses UI primitives to comply with architectural constraints.
 */
export function TelemetryPanel({ title, children }: TelemetryPanelProps) {
  return (
    <Surface variant="dark" border rounded="sm" padding={4} shadow="sm">
      <Heading level={6} mb={4} color="var(--color-text-low)">
        {title}
      </Heading>
      <Box fontSize="sm">
        {children}
      </Box>
    </Surface>
  );
}