import { Avatar, Typography, Box, Stack, CardHeader } from '@mui/material'
import { useSelector, connect } from 'react-redux'

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

function AboutMe({ aboutMe = {} }) {

    const myPostsCount = useSelector(state => state?.promise?.MyPosts?.payload)

    return (
        <Box sx={{
            maxWidth: 400
        }}>
            <CardHeader
                avatar={
                    <Avatar
                        sx={{ width: 50, height: 50 }}
                        alt={aboutMe?.login}
                        src={url.slice(0, -7) + aboutMe?.avatar?.url}
                    />
                }

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

            {/* вот тут можно добавить список всех юзеров, которые есть в базе: аватар+логин+кнопка подписаться/отписаться */}

        </Box>

    )
}

export const CAboutMe = connect(state => ({ aboutMe: state?.promise?.AboutMe?.payload }))(AboutMe)