import PremiumBanner from "@/components/premium-rudraksha/PremiumBanner";
import PremiumBannerLast from "@/components/premium-rudraksha/PremiumBannerLast";
import PremiumBannerOne from "@/components/premium-rudraksha/PremiumBannerOne";
import PremiumBannerTwo from "@/components/premium-rudraksha/PremiumBannerTwo";
import PremuimBannerThree from "@/components/premium-rudraksha/PremuimBannerThree";
import { categoriesForPremiumThree, services } from "@/utils";
import { backendUrl, serAxios } from "@/utils/axios";
import React from "react";

export const metadata = {
  title: "Premium Rudraksha Consultation Astrology",
  description: "Generated by create next app",
};

const getConsultantPageData = async () => {
  // Fetch data from external API
  try {
    const res = await serAxios.get("/dynamic-ui/page/consultation/");
    const data = res.data;
    return data.data;
  } catch (error) {
    console.error("Error fetching data:", error);
    return null;
  }
  // Pass data to the page via props
};

async function Page() {
  const data = await getConsultantPageData();
  return (
    <div>
      <PremiumBanner data={data} />
      <PremiumBannerOne data={data} />
      <PremiumBannerTwo data={data} />
      <PremuimBannerThree
        data={data}
        categoriesForPremiumThree={
          data?.consultation_reasons?.map((item, index) => ({
            title: item.title,
            description: item.description,
            logo: (
              <img src={`${backendUrl}${item.image?.path}`} alt={item.title} />
            ),
          })) ?? categoriesForPremiumThree
        }
      />
      <PremiumBannerLast
        services={data?.perks?.map((item) => ({
          title: item.title,
          description: item.description,
          imageUrl: [
            `${backendUrl}${item.image1?.path}`,
            `${backendUrl}${item.image2?.path}`,
          ],
        }))}
        data={data}
      />
    </div>
  );
}

export default Page;