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

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 (
    <Stack direction="row" h="full" align="center" justify="between" px={6}>
      <Heading level={6} weight="bold">
        {title}
      </Heading>
      <Stack direction="row" align="center" gap={4}>
        {actions}
      </Stack>
    </Stack>
  );
}