import React from "react";
import Image from "next/image";
import { NextPage } from "next";
import { get } from "lodash";

type ImgArrayProps = {
  sliderImgArray: Array<object>;
};

const Slider: NextPage<ImgArrayProps> = ({ sliderImgArray }: ImgArrayProps) => {
  return (
    <div className="slider-section">
      {/* <div className="slider-controller">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8.44349 22.1152L0.678519 13.4186C0.586353 13.3151 0.520916 13.2029 0.482206 13.0821C0.443496 12.9613 0.424449 12.8319 0.425063 12.6939C0.425063 12.5558 0.444418 12.4264 0.483128 12.3056C0.521837 12.1848 0.586968 12.0727 0.678519 11.9691L8.44349 3.24664C8.65854 3.00506 8.92736 2.88428 9.24994 2.88428C9.57252 2.88428 9.84901 3.01369 10.0794 3.27252C10.3098 3.53135 10.425 3.83331 10.425 4.17842C10.425 4.52352 10.3098 4.82549 10.0794 5.08432L3.30524 12.6939L10.0794 20.3034C10.2945 20.545 10.402 20.8428 10.402 21.1969C10.402 21.551 10.2868 21.8571 10.0564 22.1152C9.82597 22.374 9.55715 22.5035 9.24994 22.5035C8.94272 22.5035 8.6739 22.374 8.44349 22.1152Z"
            fill="#161412"
            fill-opacity="0.3"
          />
        </svg>

        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M15.5565 2.24221L23.3215 10.9388C23.4136 11.0424 23.4791 11.1545 23.5178 11.2753C23.5565 11.3961 23.5756 11.5255 23.5749 11.6636C23.5749 11.8016 23.5556 11.931 23.5169 12.0518C23.4782 12.1726 23.413 12.2847 23.3215 12.3883L15.5565 21.1108C15.3415 21.3524 15.0726 21.4731 14.7501 21.4731C14.4275 21.4731 14.151 21.3437 13.9206 21.0849C13.6902 20.8261 13.575 20.5241 13.575 20.179C13.575 19.8339 13.6902 19.5319 13.9206 19.2731L20.6948 11.6636L13.9206 4.05401C13.7055 3.81244 13.598 3.51461 13.598 3.16054C13.598 2.80646 13.7132 2.50035 13.9436 2.24221C14.174 1.98339 14.4428 1.85397 14.7501 1.85397C15.0573 1.85397 15.3261 1.98339 15.5565 2.24221Z"
            fill="#161412"
            fill-opacity="0.3"
          />
        </svg>
      </div> */}
      <div className="slider-wrapper">
        {sliderImgArray.map((sliderImg, i) => (
          <Image
            key={i}
            src={get(sliderImg, ["url"])}
            alt={`Cake Bake Slider Image ${i + 1}`}
            width={get(sliderImg, ["width"])}
            height={get(sliderImg, ["height"])}
          />
        ))}
      </div>
    </div>
  );
};
export default Slider;