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

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

const HeaderTitleBox = styled.div`
  display: flex;
`;

const HeaderTitle = styled.span`
  font-size: 15px;
`;

const HeaderMenuBox = styled.div`
  display: flex;
`;

const HeaderMenuList = styled.ul`
  display: flex;
`;

const HeaderMenuItem = styled.li`
  content: ${(props) => props.text};
`;

const StartBox = styled.div`
  background-color: #1b1464;
  color: #f1f2f6;
  font-size: 20px;
`;

export default () => {
  return (
    <HeaderBox>
      <HeaderTitleBox>
        <FontAwesomeIcon>
          <faComments />
        </FontAwesomeIcon>
        <HeaderTitle>KhuChat</HeaderTitle>
      </HeaderTitleBox>
      <HeaderMenuBox>
        <HeaderMenuList>
          <HeaderMenuItem text={"About This"} />
        </HeaderMenuList>
      </HeaderMenuBox>
      <StartBox>Start</StartBox>
    </HeaderBox>
  );
};