import styled from '@emotion/styled';
import { useRouter } from 'next/router';
import React from 'react';
import { IoIosArrowBack } from 'react-icons/io';

interface BackButtonProps {
  className?: string;
}

const StyledButton = styled.button`
  display: flex;
  width: 37px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #387c44 0%, #296832 100%);

  @media (max-width: 767px) {
    width: 30px;
    height: 30px;
  }
`;

const BackButton: React.FC<BackButtonProps> = ({ className = '' }) => {
  const router = useRouter();

  const handleBack = () => {
    router.back();
  };

  return (
    <>
      <StyledButton
        onClick={handleBack}
        className={`btn p-0 d-flex  me-3 align-items-center gap-2 ${className}`}
      >
        <IoIosArrowBack size={24} color="#fff" />
      </StyledButton>
    </>
  );
};

export default BackButton;