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

export default function CakeBakeSlider({
  step,
  stepIndex,
}: {
  step: any;
  stepIndex: number;
}) {
  const block = get(step, ["block"], {});
  const gallery = get(step, ["gallery"], []);

  return (
    <div className="cake-bake-slider-section main-container">
      <div className="boxed-content grid-two">
        <div className="slider-first-grid">
          <Image
            src={get(step, ["heroImage", "url"])}
            alt="slider image"
            width={get(step, ["heroImage", "width"])}
            height={get(step, ["heroImage", "height"])}
          />
        </div>

        <div className="second-grid-wrapper">
          <div className="second-grid">
            <div className="step-div">
              <svg
                className="step-number"
                xmlns="http://www.w3.org/2000/svg"
                width="54"
                height="54"
                viewBox="0 0 54 54"
                fill="none"
              >
                <circle
                  cx="27"
                  cy="27"
                  r="26"
                  stroke="#161412"
                  strokeOpacity="0.1"
                  strokeWidth="2"
                />
                <text
                  x="50%"
                  y="50%"
                  textAnchor="middle"
                  dy="0.3em"
                  fill="#1614121A"
                  fontFamily="Praysire Demo"
                >
                  0{stepIndex}
                </text>
              </svg>
              <hr />
              <p className="step-text">Steps</p>
            </div>
            <div className="slider-top-card">
              <h2 className="title">{block.title}</h2>
              <p className="sliderDesc">{block.text}</p>
            </div>
          </div>
          <Slider sliderImgArray={gallery} />
        </div>
      </div>
    </div>
  );
}