import { SlideData } from "@/types";
import React from "react";
import HeroCarouselItem from "./HeroCarouselItem";
import { fetchBannerImageData } from "@/services/home.service";


interface BannerItem {
  id: number;
  title: string;
  desktopImage: string;
  mobileImage?: string | null;
}

export default async function HeroCarousel() {
  let slides: SlideData[] = [];

  try {
    const response = await fetchBannerImageData();

    if (Array.isArray(response?.bannerData)) {
      slides = response.bannerData.map((item: BannerItem) => ({
        id: item.id,
        title: item.title,
        desktopImage: item.desktopImage,
        mobileImage: item.mobileImage ?? "",
      }));
    }
  } catch (error) {
    console.error("Error fetching banners:", error);
  }

  return <HeroCarouselItem slides={slides} />;
}