const PrevArrow = ({ className, style, onClick }) => (
  <div
    className={className + "custom-prev-arrow"}
    style={{ ...style, zIndex: 1 }}
    onClick={onClick}
  >
    <i className="fas fa-arrow-left"></i>
  </div>
);

const NextArrow = ({ className, style, onClick }) => (
  <div
    className={className + " custom-next-arrow"}
    style={{ ...style, zIndex: 1 }}
    onClick={onClick}
  >
    <i className="fas fa-arrow-right"></i>
  </div>
);




export const sliderProps = {
  heroBanner: {
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true,
    speed: 800,
    arrows: false,
    dots: true,
    fade: true,
    autoplay: true,
    autoplaySpeed: 5000,
  },
  categorySlider: {
    slidesToShow: 4,
    slidesToScroll: 1,
    infinite: true,
    speed: 400,
    arrows: false,
    dots: true,
    focusOnSelect: true,
    autoplay: true,
    autoplaySpeed: 3000,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  },
  menuActive: {
    slidesToShow: 4,
    slidesToScroll: 1,
    infinite: false,
    speed: 400,
    arrows: true,
    dots: false,
    focusOnSelect: true,
    autoplay: false,
    autoplaySpeed: 5000,
    prevArrow: <PrevArrow />,
    nextArrow: <NextArrow />,
    responsive: [
      { breakpoint: 1300, settings: { slidesToShow: 4 } },
      { breakpoint: 1200, settings: { slidesToShow: 3 } },
      { breakpoint: 991, settings: { slidesToShow: 3 } },
      { breakpoint: 575, settings: { slidesToShow: 2, slidesToScroll: 2 } },
    ],
  },
  testimonialsActive: {
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: false,
    speed: 400,
    arrows: false,
    dots: true,
    focusOnSelect: true,
    autoplay: false,
    autoplaySpeed: 5000,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  },
  foodCategoryActive: {
    infinite: true,
    speed: 400,
    arrows: false,
    dots: false,
    focusOnSelect: true,
    autoplay: true,
    autoplaySpeed: 5000,
    variableWidth: true,
  },
  pizzaActive: {
    slidesToShow: 4,
    slidesToScroll: 1,
    infinite: false,
    speed: 400,
    arrows: false,
    dots: true,
    focusOnSelect: true,
    autoplay: false,
    autoplaySpeed: 5000,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  },
  whyChooseCarousel: {
    infinite: true,
    speed: 400,
    arrows: false,
    dots: false,
    focusOnSelect: true,
    autoplay: true,
    autoplaySpeed: 5000,
  },
  testimonialsTwoCarousel: {
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true,
    speed: 400,
    arrows: false,
    dots: true,
    fade: true,
    focusOnSelect: true,
    autoplay: true,
    autoplaySpeed: 3000,
  },
  clientActive: {
    slidesToShow: 6,
    slidesToScroll: 1,
    infinite: true,
    speed: 400,
    arrows: false,
    dots: false,
    focusOnSelect: true,
    autoplay: true,
    autoplaySpeed: 5000,
    responsive: [
      {
        breakpoint: 1300,
        settings: {
          slidesToShow: 5,
        },
      },
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 575,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
        },
      },
    ],
  },
  fcTwoActive: {
    infinite: true,
    speed: 400,
    arrows: false,
    dots: true,
    focusOnSelect: true,
    autoplay: true,
    autoplaySpeed: 5000,
    slidesToShow: 5,
    slidesToScroll: 2,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  },
  testimonialsFiveAuthors: {
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: true,
    speed: 400,
    arrows: false,
    dots: false,
    fade: false,
    centerMode: true,
    centerPadding: "0",
    variableWidth: true,
    focusOnSelect: true,
    autoplay: false,
    autoplaySpeed: 5000,
  },
  testimonialsFiveContent: {
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: false,
    speed: 400,
    arrows: false,
    dots: true,
    fade: true,
    focusOnSelect: true,
    autoplay: false,
    autoplaySpeed: 5000,
  },
};