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

export default function CakeDesign({ ourStory }: { ourStory: any }) {
  const card = get(ourStory, ["card"], {});
  const bgUrl = get(ourStory, ["background", "url"], "");

  const bigImage = get(ourStory, ["bigImage"], []);
  const smallImage = get(ourStory, ["smallImage"], []);

  return (
    <div
      className="cake-design-section main-container"
      style={{ backgroundImage: `url(${bgUrl})` }}
    >
      <div className="cake-design-text">
        <h2 className="title">
          {card.title || "A Modern Expression of Baking in Bangladesh"}
        </h2>
        <p className="desc">
          {card.text ||
            `We bake with love, life and culture. We take pride in pioneering new
          trends and pushing our boundaries as a part of modern bakery culture
          in Bangladesh. We cherish our journey with you, from building a
          community to satisfy our guests, we infuse love and art to our every
          creation.`}
        </p>
      </div>
      <div className="cake-image boxed-content grid-two">
        {[bigImage, smallImage].map((item: any, index: number) => (
          <Image
            key={index}
            src={get(item, ["url"], "")}
            alt={`A Modern Expression of Baking in Bangladesh, Cake ${
              index + 1
            }`}
            height={get(item, ["height"], 0)}
            width={get(item, ["width"], 0)}
            className={`cake${index + 1}`}
          />
        ))}
      </div>
    </div>
  );
}