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} paddingTop={3}>
                <Typography color="text.secondary">
                    NaN Публикаций
                </Typography>
                <Typography color="text.secondary">
                    {userData.followers?.length} подписчиков
                </Typography>
                <Typography color="text.secondary">
                    {userData.following?.length || '0'} подписок
                </Typography>
            </Stack>
            <Typography sx={{ mb: 1.5 }} variant="body1">
                {userData.nick || 'Jhon Snow'}
            </Typography>
        </CardContent>
    );
}