import React from 'react'

import styled from 'styled-components/macro'

import { Logo } from 'features/Logo'
import { CenterBlock } from 'features/Login/styled'
import { useAuthStore } from 'features/AuthStore'

// временные компоненты
const TempContainer = styled.div`
  margin-top: 50px;
  color: white;
  font-size: 20px;
  display: flex;
  flex-direction: column;
`

const TempPageTitle = styled.span`
  margin: 20px 0;
`

export const HomePage = () => {
  const { logout } = useAuthStore()
  return (
    <CenterBlock>
      <Logo />
      <TempContainer>
        <TempPageTitle>HOME PAGE</TempPageTitle>
        <button type='button' onClick={logout}>Logout</button>
      </TempContainer>
    </CenterBlock>
  )
}