import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';

import { IconChevronLeft } from '@/ui/icons/index';

import NavCollapseButton from '../NavCollapseButton';

type OwnProps = {
  title: string;
};

const IconAndButtonContainer = styled.button`
  align-items: center;
  background: inherit;
  border: none;
  color: ${({ theme }) => theme.font.color.secondary};
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: ${({ theme }) => theme.font.size.lg};
  font-weight: ${({ theme }) => theme.font.weight.semiBold};
  gap: ${({ theme }) => theme.spacing(1)};
  padding: ${({ theme }) => theme.spacing(1)};
  width: 100%;
`;

const StyledContainer = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

export default function NavBackButton({ title }: OwnProps) {
  const navigate = useNavigate();

  return (
    <>
      <StyledContainer>
        <IconAndButtonContainer
          onClick={() => navigate('/', { replace: true })}
        >
          <IconChevronLeft />
          <span>{title}</span>
        </IconAndButtonContainer>
        <NavCollapseButton hideOnDesktop={true} />
      </StyledContainer>
    </>
  );
}
