import React, {useEffect, useState} from 'react'
import {Card, Flex, Skeleton, Typography} from 'antd'
import type { User} from '../utils/api'
import {getUser} from '../utils/api'
import {t} from 'ttag'

export default function UserPage() {
    const [user, setUser] = useState<User | null>(null)

    useEffect(() => {
        getUser().then(setUser)
    }, [])

    return (
        <Skeleton loading={user === null} active>
            <Flex gap='middle' align='center' justify='center' vertical>
                <Card title={t`My Account`}>
                    <Typography.Paragraph>
                        {t`Username`} : {user?.email}
                    </Typography.Paragraph>
                    <Typography.Paragraph>
                        {t`Roles`} : {user?.roles.join(',')}
                    </Typography.Paragraph>
                </Card>
            </Flex>
        </Skeleton>
    )
}