import React from 'react'
import { Box, Button, Flex, Heading, Text } from '@chakra-ui/react'

import { useChallenge } from '../context/ChallengeContext'

export const Header = () => {
  const { nickname, logout } = useChallenge()

  if (!nickname) return null

  return (
    <Box bg="white" borderBottomWidth="1px" borderColor="gray.200" py={4} px={{ base: 4, md: 8 }}>
      <Flex maxW="1200px" mx="auto" justify="space-between" align="center">
        <Box>
          <Heading size="md" color="teal.600">
            Challenge Platform
          </Heading>
          <Text fontSize="sm" color="gray.600" mt={1}>
            {nickname}
          </Text>
        </Box>
        <Button onClick={logout} variant="ghost" size="sm">
          Выйти
        </Button>
      </Flex>
    </Box>
  )
}