import React from 'react';
import {
  Box,
  Container,
  HStack,
  Image,
  Button,
  Icon,
} from '@chakra-ui/react';
import { FaExternalLinkAlt, FaHeadset } from 'react-icons/fa';

const Header = () => {
  return (
    <Box bg="blue.600" color="white" py={4}>
      <Container maxW="6xl">
        <HStack justify="space-between" align="center">
          <HStack spacing={2} align="center">
            <Image onClick={() => window.open('https://dashboard.fluentc.ai/', '_blank')} src="https://dashboard.fluentc.io/images/fluentc-white.png" alt="FluentC Logo" width={100}  />
          </HStack>
          <HStack spacing={3} display={{ base: 'none', md: 'flex' }}>
          <Button 
                colorScheme="white" 
                fontSize="sm" 
                fontWeight="bold" 
                variant="outline"
                leftIcon={<FaHeadset />}
                onClick={() => window.open('https://dashboard.fluentc.ai/', '_blank')}
              >
               Contact Support
              </Button>
            {window.fluentcData?.hasUserApiKey && (
              <Button 
                colorScheme="white" 
                fontSize="sm" 
                fontWeight="bold" 
                variant="outline"
                leftIcon={<FaExternalLinkAlt />}
                onClick={() => window.open('https://dashboard.fluentc.ai/', '_blank')}
              >
                Manage Account
              </Button>
            )}
            {!window.fluentcData?.hasUserApiKey && (
              <Button 
                colorScheme="white" 
                fontSize="sm" 
                fontWeight="bold" 
                variant="outline"
                leftIcon={<FaExternalLinkAlt />}
                onClick={() => window.open('https://dashboard.fluentc.ai/users/sign_up', '_blank')}
              >
                Get Your API Key - Sign Up for FluentC
              </Button>
            )}
          </HStack>
          
        </HStack>
      </Container>
    </Box>
  );
};

export default Header;