"use client";
import {cn} from "@/lib/utils";
import {useSwiper} from "swiper/react";

interface Props {
  className?: string;
  icon: React.ReactNode;
  position: "left" | "right";
}

export default function ArrowBtn({className, icon, position}: Props) {
  const swiper = useSwiper();

  const handleClick = () => {
    if (position === "left") {
      swiper.slidePrev();
    } else {
      swiper.slideNext();
    }
  };
  return (
    <button
      type="button"
      className={cn(
        `${position === "left" && "left-0"} ${
          position === "right" && "right-0"
        } bg-main/20 p-3 lg:p-5 rounded-full`,
        className
      )}
      onClick={handleClick}
    >
      {icon}
    </button>
  );
}