import React from 'react';
import {
    Box,
  Flex,
  IconButton,
  useColorMode,
  Button,
  HStack
} from '@chakra-ui/react';
import { MoonIcon, SunIcon } from '@chakra-ui/icons';
import { useTranslation } from 'react-i18next';

interface AppHeaderProps {
  serviceMenuContainerRef?: React.RefObject<HTMLDivElement>;
}

export const AppHeader = ({ serviceMenuContainerRef }: AppHeaderProps) => {
  const { colorMode, toggleColorMode } = useColorMode();
  const { t, i18n } = useTranslation();

  const toggleLanguage = () => {
    const newLang = i18n.language === 'ru' ? 'en' : 'ru';
    i18n.changeLanguage(newLang);
  };

  return (
    <Flex 
      as="header" 
      width="100%" 
      py={4} 
      px={8} 
      justifyContent="space-between" 
      alignItems="center"
      position="sticky"
      top={0}
      zIndex={10}
      bg={colorMode === 'light' ? 'white' : 'gray.800'}
      boxShadow="sm"
    >
      {serviceMenuContainerRef && <div id="dots" ref={serviceMenuContainerRef}></div>}
      <Box>
        
      </Box>
      <HStack spacing={4}>
        <Button 
          onClick={toggleLanguage} 
          size="sm" 
          variant="ghost"
          aria-label={i18n.language === 'ru' 
            ? t('journal.pl.lang.switchToEn') 
            : t('journal.pl.lang.switchToRu')
          }
        >
          {i18n.language === 'ru' ? 'EN' : 'RU'}
        </Button>
        
        <IconButton
          aria-label={colorMode === 'light' 
            ? t('journal.pl.theme.switchDark') 
            : t('journal.pl.theme.switchLight')
          }
          icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
          onClick={toggleColorMode}
          variant="ghost"
          size="md"
        />
      </HStack>
    </Flex>
  );
}; 