import { Container } from 'react-bootstrap'

import { useUser } from '../hooks/api'
import { userCategories } from '../assets/userCategories'
import { BackHeader, CategoryPreview, Points, SignOut } from '../components'
import { gotError } from '../hooks/useFetch'

function UserPage() {
    const user = useUser()

    return (
        <Container style={{ maxWidth: 'calc(100vh*9/16)' }}>
            <BackHeader text={
                gotError(user) ? (
                    user.error
                ) : (
                    `${user.data.name}, с нами с ${new Date(user.data.regDate).toLocaleDateString('ru')}`
                )
            }>
                <SignOut />
            </BackHeader>

            <Points points={gotError(user) ? -1 : user.data?.points} />
            {userCategories.map(cat => (
                <CategoryPreview key={cat} category={cat} />
            ))}
        </Container>
    )
}

export default UserPage