'use client';

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

interface ActionsHeaderProps {
  title: string;
}

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