import './resultBox.css';
import React, {useState, useEffect} from 'react';
import Axios from 'axios';

function ResultBox(props) {
    const [result, setResult] = useState("");
    
    useEffect(() => {
        (async () => {
            const result = await Axios.post('http://127.0.0.1:3000/checkProfanity', { word: props.inputValue});
            setResult(result.data.isProfanity);
        })();
    },[props.inputValue]);

  return (
    <div className='resultBoxArea'>
        <div className ="resultBox">
            <div className="inputValue">입력 욕설 : {props.inputValue}</div>
            <div className="resultLine">
                <div className="resultFront">판단 결과 :</div>
                <div className="resultBack">{result}</div>
            </div>
        </div>
    </div>
  );
}

export default ResultBox;