import { Swiper as SwiperType } from "swiper/types";

function CustomNavigation({
  swiperRef,
  disableNext,
  disablePrev,
}: {
  swiperRef: React.RefObject<SwiperType>;
  disableNext: boolean;
  disablePrev: boolean;
}) {
  const onPrev = () => swiperRef.current?.slidePrev();
  const onNext = () => swiperRef.current?.slideNext();

  return (
    <>
      <button
        className={`xl:flex hidden absolute left-0 top-1/3 -translate-y-1/3 -translate-x-16 lg:-translate-x-20 z-20 w-14 h-14 rounded-2xl  items-center justify-center transition-all duration-300 shadow-xl group/arrow bg-gradient-to-br from-primary to-secondary text-white shadow-primary/40 hover:shadow-2xl hover:shadow-primary/50 `}
        onClick={onNext}
        disabled={disableNext}
      >
        <div
          className="absolute inset-0 border-2 border-white/30 rounded-2xl"
          style={{ transform: "scale(1.00074) rotate(185.58deg)" }}
        ></div>
        <div
          className="absolute inset-0 rounded-2xl bg-white/20 blur-md opacity-0 group-hover/arrow:opacity-100"
          style={{ transform: "scale(1.00148)" }}
        ></div>
        <div
          className="relative z-10"
          style={{ transform: "translateX(1.48015px)" }}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="26"
            height="26"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-chevron-left"
          >
            <path d="m15 18-6-6 6-6"></path>
          </svg>
        </div>
      </button>

      <button
        className={`xl:flex hidden absolute right-0 top-1/3 -translate-y-1/3 translate-x-16 lg:translate-x-20 z-20 w-14 h-14 rounded-2xl  items-center justify-center transition-all duration-300 shadow-xl group/arrow bg-gradient-to-br from-primary to-secondary text-white shadow-primary/40 hover:shadow-2xl hover:shadow-primary/50 ${disablePrev ? "opacity-50 cursor-not-allowed" : ""}`}
        onClick={onPrev}
        disabled={disablePrev}
      >
        <div
          className="absolute inset-0 border-2 border-white/30 rounded-2xl"
          style={{ transform: "scale(1.09942) rotate(-274.95deg)" }}
        ></div>
        <div
          className="absolute inset-0 rounded-2xl bg-white/20 blur-md opacity-0 group-hover/arrow:opacity-100"
          style={{ transform: "scale(1.19884)" }}
        ></div>
        <div
          className="relative z-10"
          style={{ transform: "translateX(-0.630421px)" }}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="26"
            height="26"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-chevron-right"
          >
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </div>
      </button>
    </>
  );
}

export default CustomNavigation;