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

interface DashboardControlBarProps {
  title: string;
  actions?: React.ReactNode;
}

/**
 * DashboardControlBar
 * 
 * The top header bar for page-level controls and context.
 * Uses UI primitives to comply with architectural constraints.
 */
export function DashboardControlBar({ title, actions }: DashboardControlBarProps) {
  return (
    <Box display="flex" h="full" alignItems="center" justifyContent="between" px={6}>
      <Heading level={6} weight="bold">
        {title}
      </Heading>
      <Stack direction="row" align="center" gap={4}>
        {actions}
      </Stack>
    </Box>
  );
}