import { TextField } from "@mui/material"

function Field({ title, handleClick }) {
    return (
        <div className="relative">
            <TextField
                label={title}
                className="!w-full !mx-auto !bg-[#FFF]"
                sx={{
                    borderRadius: '8px !important',
                    '& .MuiFormLabel-root': { transform: 'translate(16px, 50%) scale(1) !important' },
                    '& .MuiInputLabel-shrink': { transform: 'translate(14px, -9px) scale(0.75) !important' },
                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
                    '& .MuiInputBase-root': { borderRadius: '8px !important' },
                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
                    ".Mui-focused": {
                        '& .MuiOutlinedInput-notchedOutline': {
                            border: '1px solid #0FA1B3 !important',
                            transition: '0.5s all'
                        }
                    }
                }}
            />
            <span
                className="absolute cursor-pointer left-0 top-0 w-full h-full"
                onClick={handleClick}
            ></span>
        </div>
    )
}

export default Field