text: import {faReact} from "@fortawesome/free-brands-svg-icons";
  import { faCompass } from "@fortawesome/free-regular-svg-icons";
  import { faHome } from "@fortawesome/free-solid-svg-icons";
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  import { Link } from "react-router-dom";
  import styled from "styled-components";
  import useUser from "../hooks/useUser";
  import routes from "../routes";
  import Avatar from "./Avatar";
  import {useState} from "react";
  
  const SHeader = styled.header`
    width: 100%;
    border-bottom: 1px solid ${(props) => props.theme.borderColor};
    background-color: ${(props) => props.theme.bgColor};
    padding: 18px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  `;
  
  const Wrapper = styled.div`
    max-width: 930px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  `;
  
  const Column = styled.div``;
  
  const Icon = styled.span`
    margin-left: 15px;
  `;
  
  const Button = styled.span`
    margin-left: 10px;
    height: 25px;
    background-color: ${(props) => props.theme.accent};
    border-radius: 4px;
    padding: 4px 15px;
    color: white;
    font-weight: 600;
    cursor: pointer;
  `;
  
  const IconsContainer = styled.div`
    display: flex;
    align-items: center;
  `;
  
  function Header() {
    const [url, setUrl] = useState("")
    const info = useUser(window.localStorage.getItem("id"))
  
    if (url !== info?.image_url && info.image_url !== "") {
      setUrl(info.image_url)
    }
    const logout = () => {
      window.localStorage.removeItem("jwt-token")
      window.localStorage.removeItem("loggedIn")
      window.localStorage.removeItem("id")
      window.location.replace("/")
    };
  
    return (
      <SHeader>
        <Wrapper>
          <Column>
            <FontAwesomeIcon icon={faReact} size="2x" />
          </Column>
          <Column>
            {window.localStorage.getItem("loggedIn") === "true" ? (
              <IconsContainer>
                <Icon>
                  <Link to={routes.home}>
                    <FontAwesomeIcon icon={faHome} size="lg" />
                  </Link>
                </Icon>
                <Icon>
                  <FontAwesomeIcon icon={faCompass} size="lg" />
                </Icon>
                <Icon>
                  <Link to={`/users/` + window.localStorage.getItem("id")}>
                    <Avatar url={url} />
                  </Link>
                </Icon>
                <Button onClick={logout}>Logout</Button>
              </IconsContainer>
            ) : (
              <Link href={routes.home}>
                <Button>Login</Button>
              </Link>
            )}
          </Column>
        </Wrapper>
      </SHeader>
    );
  }
  export default Header;
  