import SwiperItemsUI from "./SwiperItemsUI";
import { fetchComponentData, fetchListViewData } from "@/utils/data";

export default async function SwiperItems(props) {
  // 1. Fetch component settings from the CMS/backend using the centralized utility.
  const { data: componentData } = await fetchComponentData("SwiperItems");
  
  // If there are no settings, we can't proceed.
  if (!componentData) {
    return null;
  }

  // 2. Determine parameters for fetching the list of items, using props as a fallback.
  const pagetype = componentData?.t1 || props.pagetype || "";
  const category = componentData?.t2 || props.category || "";
  const count = componentData?.t4 || props.count || 12;

  let items = [];
  // Only fetch items if a pagetype is defined.
  if (pagetype) {
    const { data: listViewData } = await fetchListViewData({ pagetype, category, count });
    if (Array.isArray(listViewData)) {
      items = listViewData;
    }
  }
  
  // 3. Pass the server-fetched data to the client component for rendering.
  // This component is now lean and only concerned with orchestrating data flow.
  return <SwiperItemsUI data={componentData} items={items} {...props} />;
}