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


export function CustomTextField({ id, label, value, name, onBlur,error, type, sx, onChange: setValue }: {
    id: string;
    label: string;
    value: number | string | null;
    name?: string;
    onBlur?: InputBaseProps['onBlur'];
    error?: boolean;
    type?: HTMLInputTypeAttribute;
    sx?: SxProps<Theme>;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
}) {
    const theme = useTheme();

    return (
        <TextField
            fullWidth
            id={id}
            label={label}
            variant="filled"
            name={name}
            onBlur={onBlur}
            error={error}
            color="secondary"
            type={type}
            sx={sx}
            InputProps={{
                style: {
                    backgroundColor: theme.palette.content.main,
                    color: theme.palette.secondary.main,
                }
            }}
            InputLabelProps={{
                style: {
                    color: theme.palette.secondary.main
                }
            }}
            value={value ? value : ""}
            onChange={setValue}
        />
    );
}