import { Avatar, Button, Grid, Stack } from '@mui/material'
import { Container } from '@mui/system'
import { withProtection } from '../hocs'
import { BackButton } from '../components'

export const UserPage = withProtection(() => {
    const currentUser = {
        name: 'Петя',
        avatarPath: '',
        about: '',
    }
    return (
        <Container maxWidth="lg">
            <BackButton title="Профиль" text="< Главная" path="/" />
            <Grid container spacing={2}>
                <Grid size={{ xs: 12, md: 4 }}>
                    <Avatar
                        alt={currentUser?.name}
                        src={
                            currentUser?.avatarPath
                                ? currentUser.avatarPath
                                : '/static/images/avatar/1.jpg'
                        }
                        sx={{ width: 150, height: 150 }}
                    />
                    <p>{currentUser?.name}</p>
                    <p>{currentUser?.about}</p>

                    <Stack>
                        <Button variant="outlined">Редактировать профиль</Button>
                        <Button variant="outlined" color="info">
                            Изменить аватар
                        </Button>
                    </Stack>
                </Grid>
            </Grid>
        </Container>
    )
})