import React, { Component } from "react";
import ReactDOM from "react-dom";
import Timer from "./Timer.js";

import "./styles.css";

function TimeOptions(props) {
  return <div className="option-div">{props.name}</div>;
}

class App extends Component {
  render() {
    return (
      <div className="app-container">
        <div className="options-container">
          <TimeOptions name="Pomodoro" />
          <TimeOptions name="Break" />
          <TimeOptions name="Custom Timer" />
        </div>
        <div className="time-display">
          <Timer />
        </div>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);