import { Avatar, Typography, Box, Stack, CardHeader } from '@mui/material'

import { url } from "../../App"


function AboutMe({ me }) {

    const urlAvatar = url.slice(0, -7) + me?.avatar?.url

    return (
        <Box>
            <CardHeader
                avatar={
                    <Avatar alt={me?.login} src={urlAvatar} sx={{ width: 50, height: 50 }} />
                }

                subheader={
                    <Typography variant='h6'>
                        {me?.login}
                    </Typography>
                }
            />
            <Stack direction="row" spacing={1} padding={2}>
                <Typography>
                    NaN публикаций
                </Typography>
                <Typography>
                    {me?.followers?.length || '0'} подписчиков
                </Typography>
                <Typography>
                    {me?.following?.length || '0'} подписок
                </Typography>
            </Stack>
        </Box>

    )
}

export default AboutMe



