import ReactDOM from 'react-dom';
import {ExerciseOne} from './multiplication_table';
import {ExerciseTwo} from './rater';
import {ExerciseThree} from './progressbar';
import {ExerciseFour} from './comment-card';
import {ExerciseFive} from './number-grid';
import Calculator from './calculator';
import BmiCalculator from './bmiCalculator';

const ExerciseTitle = (props) => {
    const titleStyle = {
        fontFamily: '"Lucida Sans", "Monaco", monospace',
        fontSize: "3rem",
        letterSpacing: 6,
        wordSpacing: 0.4,
        color: "#3A5D9B",
        fontWeight: 300,
        fontStyle: "oblique",
        lineHeight: 1.2
    }

    return <span style={titleStyle}>{props.title}</span>;
}

const Exercise = (props) => {
    const exerciseStyle = {
        boxShadow: "7px 2px 8px 1px rgba(18,89,46,0.67)",
        background: "#EEEEEE",
        minHeight: "15em",
        padding: ".5em",
        margin: "1.5em .5em",
    }

    return (
        <div style={exerciseStyle}>
            <ExerciseTitle title={props.title}/>
            {props.children}
        </div>
    )
}


ReactDOM.render(
    <div>
        <Exercise title="Oefening 1: Multiplication Table">
            <ExerciseOne/>
        </Exercise>
        <Exercise title="Oefening 2: Rater">
            <ExerciseTwo/>
        </Exercise>
        <Exercise title="Oefening 3: Progressbar">
            <ExerciseThree/>
        </Exercise>
        <Exercise title="Oefening 4: CommentCard">
            <ExerciseFour/>
        </Exercise>
        <Exercise title="Oefening 5: Getallen kader">
            <ExerciseFive/>
        </Exercise>
        <Exercise title="Oefening 6: Calculator">
            <Calculator/>
        </Exercise>
        <Exercise title="Oefening 7: BMI Calculator">
            <BmiCalculator/>
        </Exercise>
    </div>
    ,
    document.getElementById('root')
);
