'use client';

import { Stack } from '@/ui/primitives/Stack';
import { StatusIndicator } from '@/ui/StatusIndicator';
import { Text } from '@/ui/Text';
import { Activity } from 'lucide-react';

interface ActionsHeaderProps {
  title: string;
}

export function ActionsHeader({ title }: ActionsHeaderProps) {
  return (
    <Stack 
      as="header" 
      direction="row"
      h="16" 
      borderBottom 
      borderColor="border-[#23272B]" 
      align="center" 
      px={6} 
      bg="bg-[#141619]"
    >
      <Stack direction="row" align="center" gap={4}>
        <Stack 
          w="2" 
          h="6" 
          bg="bg-[#198CFF]" 
          rounded="sm" 
          shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]"
        >{null}</Stack>
        <Text as="h1" size="xl" weight="medium" letterSpacing="tight" uppercase>
          {title}
        </Text>
      </Stack>
      <Stack className="ml-auto" direction="row" align="center" gap={4}>
        <StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />
      </Stack>
    </Stack>
  );
}