import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';

export interface HeaderContentViewData {}

export function HeaderContentTemplate(_props: HeaderContentViewData) {
  return (
    <>
      <Stack direction="row" align="center" gap={6}>
        <Box as={Link} href="/" display="inline-flex" alignItems="center" group>
          <Box position="relative">
            <Box h={{ base: '24px', md: '28px' }} w="auto" transition opacity={1} groupHoverOpacity={0.8}>
              <Image
                src="/images/logos/wordmark-rectangle-dark.svg"
                alt="GridPilot"
                width={160}
                height={30}
                priority
              />
            </Box>
            <Box 
              position="absolute" 
              bottom="-4px" 
              left="0" 
              w="0" 
              h="2px" 
              bg="primary-accent" 
              transition 
              groupHoverWidth="full" 
            />
          </Box>
        </Box>
        <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="[#23272B]" pl={6}>
          <Box w="6px" h="6px" rounded="full" bg="primary-accent" animate="pulse" />
          <Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
            MOTORSPORT INFRASTRUCTURE
          </Text>
        </Box>
      </Stack>
      
      <Box display="flex" alignItems="center" gap={4}>
        <Stack direction="row" display={{ base: 'none', md: 'flex' }} align="center" gap={1} px={3} py={1} border borderColor="[#23272B]" bg="[#141619]/20">
          <Text size="xs" color="text-gray-600" weight="bold" font="mono">STATUS:</Text>
          <Text size="xs" color="text-success-green" weight="bold" font="mono">OPERATIONAL</Text>
        </Stack>
      </Box>
    </>
  );
}