import React from 'react'
import { useSelector } from 'react-redux'

import { selectIsAnonymousUser } from '../../store/selectors/selectIsAnonymousUser'
import { UserIndicator } from '../UserIndicator'

import { BackToEventsButtonLink, HeaderContainer, SegmentLogo, StyledButtonLink } from './style'


export const Header = () => {
  const isIdentified = !useSelector(selectIsAnonymousUser)

  return (
    <HeaderContainer>
      <SegmentLogo />
      <StyledButtonLink to='/user'>
        <UserIndicator identified={isIdentified} />
      </StyledButtonLink>
      <BackToEventsButtonLink to='/events' />
    </HeaderContainer>
  )
}
