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

interface TelemetryPanelProps {
  title: string;
  children: React.ReactNode;
  'data-testid'?: string;
}

/**
 * TelemetryPanel
 *
 * A dense, instrument-grade panel for displaying data and controls.
 */
export function TelemetryPanel({ title, children, 'data-testid': testId }: TelemetryPanelProps) {
  return (
    <Panel title={title} variant="dark" padding={4} data-testid={testId}>
      <Text size="sm" variant="med">
        {children}
      </Text>
    </Panel>
  );
}
