import { get } from "lodash";

import NewProducts from "@/components/NewProducts/NewProducts";
import newProductsJson from "@/data/newProducts.json";
import CakeBake from "@/components/CakeBake/CakeBake";
import CakeBakeSlider from "@/components/CakeBakeSlider/CakeBakeSlider";
import CakeDesign from "@/components/CakeDesign/CakeDesign";
import TopBanner from "@/components/TopBanner/TopBanner";
import { apiEndpoints } from "@/lib/api";

export default async function Home() {
  const { data: home } = await apiEndpoints.home();

  const bakes = get(home, ["bakes"], []);

  const getStep = (step: any, index: number) => {
    const component = get(step, ["__component"])?.split(".")[1];

    if (component === "cake-bake") {
      return <CakeBake key={index} step={step} stepIndex={index + 1} />;
    } else if (component === "cake-bake-slider") {
      return <CakeBakeSlider key={index} step={step} stepIndex={index + 1} />;
    }
  };

  return (
    <>
      <TopBanner hero={get(home, ["Hero"])} />
      <NewProducts newCakes={get(home, ["newCakes"])} />
      <CakeDesign ourStory={get(home, ["ourStory"])} />
      {bakes.map((step: any, index: number) => getStep(step, index))}
    </>
  );
}