import FeatureCard from "./FeatureCard";
import { getLocale, getTranslations } from "next-intl/server";
import { CMSItem, CmsServiceItem } from "@/types/cms";
import { cmsValue, localizedText } from "@/services/cmsService";
import CmsPreviewText from "@/components/preview/CmsPreviewText";

export default async function FeaturesList({ cms }: { cms: CMSItem[] }) {
  const locale = await getLocale();
  const isArabic = locale === "ar";
  const t = await getTranslations("AboutUsSection");

  const cmsItems = cmsValue(cms, "services_items") as CmsServiceItem[] | undefined;

  const features =
    cmsItems && cmsItems.length > 0
      ? cmsItems.map((item) => ({
          title: localizedText(item.title, locale),
          description: localizedText(item.description, locale),
        }))
      : [1, 2, 3, 4].map((n) => ({
          title: t(`card${n}Title`),
          description: t(`card${n}Description`),
        }));

  return (
    <div
      className={`absolute ${
        isArabic ? "left-0" : "right-0"
      } top-0 lg:-top-5 w-fit h-full flex flex-col gap-5 md:gap-6`}
    >
      {features.map((feature, index) => (
        <FeatureCard
          key={index}
          title={
            <CmsPreviewText
              sectionName="services"
              inputNameEn="services_items"
              itemIndex={index}
              itemField="title"
              initialValue={feature.title}
            />
          }
          description={
            <CmsPreviewText
              sectionName="services"
              inputNameEn="services_items"
              itemIndex={index}
              itemField="description"
              initialValue={feature.description}
            />
          }
        />
      ))}
    </div>
  );
}