/* eslint react/prop-types: 0 */
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import useBaseUrl from "@docusaurus/useBaseUrl";

function CarouselElement({name, img, link}) {
  if (typeof link === "undefined" && typeof name === "undefined") {
    return (
      <div className="carousel_box">     
        <div>
          <img src={useBaseUrl(img)} className="carousel_img" />
        </div>
      </div>
    );
  }

  else if (typeof link === "undefined") {
    return (
      <div className="carousel_box">
        <img src={useBaseUrl(img)} className="carousel_img" />
        <h6 className="carousel_title">{name}</h6>
      </div>
    );
  }

  else if (typeof name === "undefined") {
    return (
      <div className="carousel_box">
        <a href={link} target="_blank" rel="noopener noreferrer">
          <img src={useBaseUrl(img)} className="carousel_img" />
        </a>
      </div>
    );
  }

  else {
    return (
      <div className="carousel_box">
        <a href={link} target="_blank" rel="noopener noreferrer">
          <img src={useBaseUrl(img)} className="carousel_img" />
          <h6 className="carousel_title">{name}</h6>
        </a>
      </div>
    );
  }
}

export default function Carousel(props) {
  const list = props.list;
  //https://react-slick.neostack.com/docs/api/
  const settings = {
    infinite: true,
    easing: "linear",
    slidesToShow: 2,
    slidesToScroll: 1,
    arrows: false,
    autoplay: true,
    speed: 3000,
    draggable: false,
    swipeToSlide: false,
    autoplaySpeed: 3000,
    variableWidth: true,
    centerMode: true,
    pauseOnHover: true,
    cssEase: "linear"
  };

  return (
    <div>
      <Slider {...settings}>
        {list.map((props, idx) => (
          <CarouselElement key={idx} {...props} />
        ))}
      </Slider>
    </div>
  );
}