import React from "react";
import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";

const CheckListBox = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50%;
  background-color: white;
  opacity: 0.8;
  border-radius: 10px;
`;

const ElementBox = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
`;

const IconBox = styled.div`
  svg {
    font-size: 15px;
  }
`;

const ListContentBox = styled.div`
  font-size: 15px;
`;

export default () => {
  return (
    <CheckListBox>
      <ElementBox>
        <IconBox>
          <FontAwesomeIcon icon={faCheckCircle} />
        </IconBox>
        <ListContentBox>Check List One</ListContentBox>
      </ElementBox>
    </CheckListBox>
  );
};