import {FormControl, TextField, useTheme, SxProps, Theme} from "@mui/material";
import {ChangeEvent} from "react";

interface CustomTextFieldProps {
    placeholder: string;
    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
    text?: string;
    sx?: SxProps<Theme>;
}

export default function CustomTextField({ placeholder, text, sx, onChange}: CustomTextFieldProps) {
    const theme = useTheme();

    return (
        <FormControl
            fullWidth
            variant="standard"
            sx={{ p: 0 }}
        >
            <TextField
                defaultValue={text}
                fullWidth
                placeholder={placeholder}
                onChange={onChange}
                sx={{
                    "& .MuiInputBase-root": {
                        backgroundColor: theme.palette.background.default,
                        height: "48px",
                        borderRadius: "10px",

                    },
                    ...sx
                }}
                inputProps={{
                    sx: {
                        borderRadius: "10px",
                        fontSize: "18px",
                        lineHeight: "21px",
                        py: 0,

                    }
                }}
            />
        </FormControl>
    );
}