import { BaseTextFieldProps as MuiBaseTextFieldProps, TextField as MuiTextField } from "@mui/material";
import { useState } from 'react';
import './text-field.scss';

interface BaseTextFieldProps extends MuiBaseTextFieldProps {
}

export const TextField = ({ ...rest }: BaseTextFieldProps) => {
    const [isClicked, setIsClicked] = useState(false);

    const handleClick = () => {
        setIsClicked(true);
    }

    const handleBlur = () => {
        setIsClicked(false);
    }

    return (
        <div className={`text-field ${isClicked ? 'clicked' : ''}`}>
            <MuiTextField
                required={true}
                {...rest}
                onFocus={handleClick}
                onBlur={handleBlur}
            ></MuiTextField>
        </div>
    );
}