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


export function CustomTextField({ id, label, value, type, setValue }: {
    id: string;
    label: string;
    value: number | string | null;
    type?: HTMLInputTypeAttribute;
    setValue: (e: ChangeEvent<HTMLInputElement>) => void;
}) {
    const theme = useTheme();

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