import * as React from 'react';
import { useState } from 'react';

import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import SendRoundedIcon from '@mui/icons-material/SendRounded';


export const CreatePost = () => {

    const [titleValue, setTitleValue] = useState('')
    const [textValue, setTextValue] = useState('')


    return (
        <Container maxWidth="80%">
            <div>
                поле добавления фотографий
            </div>

            <Box
                component="form"
                sx={{
                    '& > :not(style)': { m: 1, width: '80%', marginBottom: '20px' },
                }}
            >
                <TextField
                    id="title"
                    label="Название поста"
                    variant="standard"
                    onChange={e => setTitleValue(e.target.value)}
                />
            </Box>

            <Box
                component="form"
                sx={{
                    '& .MuiTextField-root': { m: 1, width: '80%', marginBottom: '20px' },
                }}
            >
                <TextField
                    id="text"
                    label="Описание поста"
                    multiline
                    rows={2}
                    variant="standard"
                    onChange={e => setTextValue(e.target.value)}
                />
            </Box>

            <Stack spacing={2} direction="row">
                <Button variant="outlined" startIcon={<SendRoundedIcon style={{ transform: 'translate(3px, -4px) rotate(-30deg)' }} />} onClick={e => { console.log('click') }}>
                    Опубликовать пост
                </Button>
            </Stack>
        </Container>


    )


}
