import { get } from "lodash";
import Image from "next/image";
import Link from "next/link";

import { Photo } from "@/types";

import style from "./newProducts.module.css";

export default function NewProducts({ newCakes }: { newCakes: any }) {
  const cakes = get(newCakes, ["cakes"], []);
  const title = get(newCakes, ["title"], "");

  return (
    <section className="products-section main-container">
      <div className="boxed-content">
        <h2 className="title">{title || "New Cake Designs"}</h2>
        <hr />
      </div>
      <div className={style.NewProductsWrapper}>
        {cakes.map((cake: Photo, index: number) => {
          const imageElement = (
            <Image
              src={get(cake, ["image", "url"], "") || ""}
              alt={`New cake ${index}`}
              style={{
                objectFit: "cover",
              }}
              width={400}
              height={400}
            />
          );

          if (cake.isClickable && cake.url) {
            return (
              <Link
                key={index}
                href={cake.url}
                target="_blank"
                rel="noopener noreferrer"
              >
                {imageElement}
              </Link>
            );
          }

          return <div key={index}>{imageElement}</div>;
        })}
      </div>
    </section>
  );
}