import { Button, Input, TextField } from "@mui/material"
import { useState } from "react"
import { useDispatch } from "react-redux"
import { actionSetNick } from "./actions/actions"

const ProfileMutationForm = ({user}) => {
    const [nick, setNick] = useState(user?.nick || "" )
    const dispatch = useDispatch()

    return(
        <>
        <TextField
         id="nick"
         label="Nick"
         variant="outlined"
         value={nick}
         onChange={(event)=>setNick(event.target.value)}
         size='small'
         />
        <Button onClick={()=>dispatch(actionSetNick(nick))} sx={{minHeight: '40px'}}>Редактировать</Button>
        </>
    )
}

export default ProfileMutationForm