import {Grid, IconButton, InputAdornment, TextField} from "@mui/material";
import {useTranslations} from "next-intl";
import {Visibility, VisibilityOff} from "@mui/icons-material";
import {useState} from "react";

const UserInfo = ({formik}) => {
    const t = useTranslations();
    const [showPassword, setShowPassword] = useState(false);

    const handleClickShowPassword = () => {
        setShowPassword(!showPassword);
    };

    return (
        <>
            <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
                <Grid item xs={12} sm={6}>
                    <TextField
                        name="username"
                        label={t("ExpertMangement.text_field_username")}
                        variant="outlined"
                        margin="normal"
                        size="small"
                        value={formik.values.username}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        error={formik.touched.username && !!formik.errors.username}
                        helperText={formik.touched.username && formik.errors.username ? formik.errors.username : null}
                        sx={{width: "100%"}}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <TextField
                        name="password"
                        label={t("ExpertMangement.text_field_password")}
                        variant="outlined"
                        margin="normal"
                        size="small"
                        value={formik.values.password}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        error={formik.touched.password && !!formik.errors.password}
                        helperText={formik.touched.password && formik.errors.password ? formik.errors.password : null}
                        type={showPassword ? "text" : "password"}
                        InputProps={{
                            endAdornment: (
                                <InputAdornment position="end">
                                    <IconButton onClick={handleClickShowPassword}>
                                        {showPassword ? <Visibility/> : <VisibilityOff/>}
                                    </IconButton>
                                </InputAdornment>
                            ),
                        }}
                        sx={{width: "100%"}}
                    />
                </Grid>
            </Grid>
        </>
    )
}
export default UserInfo