import Hero from "@/components/hero-page/Hero";
import HeroFour from "@/components/hero-page/HeroFour";
import HeroSix from "@/components/hero-page/HeroSix";
import SecondGallery from "@/components/product-category/SecondGallery";
import BannerSlider from "@/components/sliders/BannerSlider";
import SliderTwo from "@/components/sliders/SliderTwo";
import { backendUrl, serAxios } from "@/utils/axios";
import { guranteeData, categories } from "@/utils";
import { DASHBOARD } from "./dummyData";

const getDashboardData = async () => {
  // Fetch data from external API
  try {
    const res = await serAxios.get('/dynamic-ui/page/dashboard/')
    const data = res.data
    return data.data
  } catch (error) {
    return DASHBOARD
  }
  // Pass data to the page via props
}
export default async function Home({ page }) {
  const data = await getDashboardData();
  return (
    <>
      <Hero data={data ? data.images.map((image) => ({
        type: "image",
        src: `${backendUrl}${image.path}`,
      })) : null} />
      <HeroFour data={data} />
      <HeroSix data={data} guranteeData={data?.org_item?.map((item, index) => ({
        id: index,
        title: item.title,
        imageUrl: `${backendUrl}${item.image?.path}`,
      })) ?? guranteeData} />
      <BannerSlider data={data} categories={data?.discover_item?.map((item) => ({
        title: item.title,
        image: `${backendUrl}${item.image?.path}`,
      })) ?? categories} />
      <SliderTwo />
      <SecondGallery data={data} />
    </>
  );
}