import { Box, FormControl, InputLabel, TextField, useTheme } from "@mui/material";


interface Props {
    id: string;
    label?: string;
    bold?: boolean;
    placeholder?: string;
    value: string;
    gap?: string;
    onChange: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
}

export default function InputTextfield({ id, label, placeholder, bold = false, gap = "10px", value, onChange }: Props) {
    const theme = useTheme();

    const labelFont = bold ?
        theme.typography.p1
        :
        {
            fontWeight: 500,
            fontSize: "18px",
            lineHeight: "21.33px"
        };

    return (
        <Box
            component="form"
            noValidate
            sx={{ width: "100%" }}
        >
            <FormControl
                fullWidth
                variant="standard"
                sx={{
                    gap,
                }}
            >
                <InputLabel
                    shrink
                    htmlFor={id}
                    sx={{
                        position: "inherit",
                        color: "black",
                        transform: "none",
                        ...labelFont,
                    }}
                >
                    {label}
                </InputLabel>
                <TextField
                    value={value}
                    fullWidth
                    placeholder={placeholder}
                    id={id}
                    sx={{
                        backgroundColor: theme.palette.background.default,
                        "& .MuiInputBase-root": {
                            height: "48px",
                            borderRadius: "8px",
                        }
                    }}
                    inputProps={{
                        sx: {
                            borderRadius: "8px",
                        }
                    }}
                    onChange={onChange}
                />
            </FormControl>
        </Box>
    );
}