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

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

  const style = {
    backgroundImage: `url("${get(step, ["background", "url"])}")`,
  };
  return (
    <div className="cake-bake-section main-container" style={style}>
      <div className="boxed-content grid-two">
        <div className="first-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="top-card">
            <h2 className="title">{block.title}</h2>
            <p className="desc">{block.text}</p>
          </div>
        </div>
        <div className="second-grid">
          <Image
            src={get(step, ["heroImage", "url"])}
            alt={block.title}
            width={get(step, ["heroImage", "width"])}
            height={get(step, ["heroImage", "height"])}
          />
        </div>
      </div>
    </div>
  );
}