import { FunctionComponent } from "react";
import styled from "styled-components";
import color from "../../styles/color";

import ArrowLeftIcon from "../../public/images/svg/arrow-left.svg";
import Image from "next/image";

export const BackButton: FunctionComponent = () => {
  return (
    <Container
      onClick={() => {
        location.href = "/";
      }}
    >
      <ContentContainer>
        <IconContainer>
          <Image
            src={ArrowLeftIcon}
            fill={true}
            sizes="1rem"
            alt="arrow left icon"
          />
        </IconContainer>
        <div>BACK</div>
      </ContentContainer>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  justify-content: flex-end;

  width: 100%;
  padding: 0.7rem 0.5rem;

  font-family: "Inter", serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 0.8rem;

  color: ${color.grey["400"]};

  cursor: pointer;
`;

const ContentContainer = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 0.25rem;
`;

const IconContainer = styled.div`
  position: relative;

  width: 1rem;
  height: 1rem;
`;