import AboutUsImageOne from "@/assets/images/about-us-one.png";
import { getLocale, getTranslations } from "next-intl/server";
import SectionTitle from "@/components/shared/SectionTitle";
import { CMSItem } from "@/types/cms";
import { cmsImageUrl, cmsText } from "@/services/cmsService";
import CmsPreviewText from "@/components/preview/CmsPreviewText";
import CmsPreviewImage from "@/components/preview/CmsPreviewImage";

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

  const title = cmsText(cms, "title", locale, t("title"));
  const description = cmsText(
    cms,
    "description",
    locale,
    `${t("description1")} ${t("description2")}`,
  );
  const rightImage = cmsImageUrl(cms, "right_image") || AboutUsImageOne;

  return (
    <div className="order-1 lg:order-2">
      <div className="flex flex-col gap-5 md:gap-10">
        <SectionTitle>
          <CmsPreviewText
            sectionName="services"
            inputNameEn="title"
            initialValue={title}
          />
        </SectionTitle>
        <div className="text-[14px] sm:text-[24px]">
          <p>
            <CmsPreviewText
              sectionName="services"
              inputNameEn="description"
              initialValue={description}
            />
          </p>
        </div>
        <div className="relative w-full lg:h-100 lg:aspect-none aspect-664/300 rounded-[24px] overflow-hidden">
          <CmsPreviewImage
            sectionName="services"
            inputNameEn="right_image"
            initialSrc={rightImage}
            alt="About Us Image One"
            fill
            className="object-cover"
          />
        </div>
      </div>
    </div>
  );
}