import { TextField } from "@mui/material"
import { styleTextSelectRight } from "@/mui"

function Field({ title, type, isPlaceHolder }) {
    return (
        <TextField
            label={title}
            type={type || 'text'}
            className="!w-full !mx-auto !bg-[#FFF]"
            sx={{
                ...styleTextSelectRight,
                // Hide Icon Number
                '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
                    display: 'none'
                },
                '& input[type=number]': {
                    MozAppearance: 'textfield'
                },

                '& .MuiInputBase-input': { padding: '12.5px 14px' },
                '& .MuiInputBase-root': { borderRadius: '6px !important' },
                '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
                ".Mui-focused": {
                    '& .MuiOutlinedInput-notchedOutline': {
                        border: '1px solid #0FA1B3 !important',
                        transition: '0.5s all'
                    }
                }
            }}
        />
    )
}

export default Field