const Header = (props) => {
    const headerStyle = {
        fontSize : 50,
        color: "#e65100",
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        backgroundColor: "#ff9800"
    };

    const translate = {
        1: "One",
        2: "Two",
        3: "Three",
        4: "Four",
        5: "Five",
        6: "Six",
        7: "Seven",
        8: "Eight",
        9: "Nine",
    }
    return <div style={headerStyle}>{translate[props.number]}</div>;
}

const Row = (props) => {
    const cellStyle = {
        fontSize : 20,
        color: "#455a64"
    };

    const result = props.factor1 * props.factor2;

    return <div style={cellStyle}>{props.factor1} x {props.factor2} = {result}</div>;
}

const MultiplicationTable = (props) => {

    const tableStyle = {
        fontFamily : "Comic Sans MS",
        textAlign: "center",
        width: 200,
        padding: 0,
        borderRadius: 20,
        backgroundColor: "#ffe0b2",
        filter: "drop-shadow(0px 0px 5px #666)",
        margin: "2em"
    };

    const output = [];

    for (let i = 1; i < 11; i++) {
        output.push(<Row factor1={i} factor2={props.number}/>);
    }

    return <div style={tableStyle}>
        <Header number={props.number}/>
        {output}
    </div>
}

const ExerciseOne = (props) => {
    const exerciseStyle = {
        display: "flex"
    }

    return <div style={exerciseStyle}>
        <MultiplicationTable number={9}/>
        <MultiplicationTable number={3}/>
    </div>
}

export {ExerciseOne};
