import React, { FC, useRef } from "react";

import SwiperArrowLeft from "../../Cart/CartSingleProduct/widget/arrowLeft";
import SwiperArrowRight from "../../Cart/CartSingleProduct/widget/arrowRight";
export interface CartBoxProviderProps {
  title?: string;
  size?: string;
  price?: number;
  discountedPrice?: number;
  quantity?: number;
  img?: any;
  color?: any;
  tag?: string;
  onClick?: () => void;
  recomProducts: any;
}
// title, size, price, discountedPrice, quantity, img, color, tag, onClick
export const CartBoxProvider: FC<CartBoxProviderProps> = (
  props: any,
  { recomProducts, title }
) => {
  const swiperButtonPrev22 = useRef(null);
  const swiperButtonNext22 = useRef(null);
  return (
    <div className="mt-30 relative w-full rounded-[10px] mb-[30px] bg-white py-20 2xl:py-20-2xl swiper-custom-layout ">
      <div
        className={`relative flex justify-between px-20 2xl:px-20-2xl mb-[17.5px] 2xl:mb-[1.215vw]`}
      >
        <button
          className={`swiperButtonPrev22 mr-10 h-4 w-4 2xl:w-[1.111vw] 2xl:h-[1.111vw] ${
            recomProducts.length === 1 ? "swiper-button-disabled" : null
          }  `}
          ref={recomProducts.length <= 1 ? null : swiperButtonPrev22}
          aria-label="swiper-btn"
        >
          <SwiperArrowLeft />
        </button>
        <p className="text-utility-large uppercase tracking-[0.08em] 2xl:text-utility-large-2xl ">
          {title}
        </p>
        <button
          className={`swiperButtonNext22 h-4 w-4 2xl:w-[1.111vw] 2xl:h-[1.111vw]  ${
            recomProducts.length === 1 ? "swiper-button-disabled" : null
          }`}
          ref={recomProducts.length <= 1 ? null : swiperButtonNext22}
          aria-label="swiper-btn"
        >
          <SwiperArrowRight />
        </button>
      </div>
      {props.children}
    </div>
  );
};
export default CartBoxProvider;