import { Flex, Text, Box } from '@chakra-ui/react';

export const StatusBar = () => {
  return (
    <Flex
      h="28px"
      bg="gray.950"
      borderTop="1px solid"
      borderColor="green.900"
      align="center"
      px={4}
      justify="space-between"
      fontFamily="'JetBrains Mono', monospace"
      fontSize="11px"
      color="green.500"
      css={{
        boxShadow: 'inset 0 1px 0 rgba(0,255,0,0.1)'
      }}
    >
      <Flex gap={6} align="center">
        <Flex gap={2} align="center">
          <Box w="6px" h="6px" borderRadius="full" bg="green.400" css={{ animation: 'blink 2s infinite' }} />
          <Text fontWeight="bold">LUNA_CORE_ONLINE</Text>
        </Flex>
        <Text color="gray.500">SESSION: sess_99x</Text>
        <Text color="gray.500">MEM: 4.2GB / 16GB</Text>
      </Flex>

      <Flex gap={6}>
        <Text color="gray.500">{new Date().toISOString()}</Text>
        <Text>v2.4.1</Text>
      </Flex>
    </Flex>
  );
};