import * as React from 'react';
// import Box from '@mui/material/Box';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

import Button from '@mui/material/Button';
// import DeleteIcon from '@mui/icons-material/Delete';
// import SendIcon from '@mui/icons-material/Send';
import Stack from '@mui/material/Stack';
import ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlined';

// кнопка редактирования профиля
function UptadeProfile() {
    return (
        // < Stack direction="row" spacing={2} >
        <Button variant="outlined" startIcon={<ManageAccountsOutlinedIcon />} disableRipple>Редактировать аккаунт</Button>
        // </Stack >
    )
}

// блок пользовательских данных
export default function BasicCard({ userData }) {
    return (
        <CardContent sx={{ width: '100%', paddingTop: 0 }}>
            <Stack direction="row" spacing={5}>
                <Typography variant="h5" component="div">
                    {userData.login}
                </Typography>
                <UptadeProfile />
            </Stack>
            <Stack direction="row" spacing={5} marginTop={3}>
                <Typography color="text.secondary">
                    NaN Публикаций
                </Typography>
                <Typography color="text.secondary">
                    {userData.followers?.length || '0'} подписчиков
                </Typography>
                <Typography color="text.secondary">
                    {userData.following?.length || '0'} подписок
                </Typography>
            </Stack>
            <Typography sx={{ mb: 1.5 }} marginTop={3} variant="body1">
                {userData.nick || ''}
            </Typography>
        </CardContent>
    )
}