ArrowButton.jsx

import styled from "styled-components";
import LeftArrow from "../icons/LeftArrow";
import RightArrow from "../icons/RightArrow";

export const S = {};
S.ArrowButton = styled.button`
  background-color: transparent;
  border: none;
  position: absolute;
  z-index: 999;
  cursor: pointer;

  ${({ type }) =>
    type === "prev"
      ? `left: 0;
    right: auto;`
      : `left: auto;
    right: 0;`}

  top: 50%;
  transform: translateY(-50%);

  visibility: ${({ isVisible }) => (isVisible ? "visible" : "hidden")};
  opacity: 0;

  &:focus {
    outline: none;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.01);
  }
`;

const ArrowButton = ({ type, isVisible, onClick }) => {
  return (
    <S.ArrowButton type={type} isVisible={isVisible} onClick={onClick}>
      {type === "prev" ? <LeftArrow /> : <RightArrow />}
    </S.ArrowButton>
  );
};

export default ArrowButton;