import { getLocale, getTranslations } from "next-intl/server";
import { CMSItem } from "@/types/cms";
import { cmsText } from "@/services/cmsService";
import CmsPreviewText from "@/components/preview/CmsPreviewText";

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

  const title = cmsText(cms, "first_title", locale, t("title"));
  const titleHighlight = cmsText(cms, "second_title", locale, t("titleHighlight"));

  return (
    <h1 className="text-natural-vanilla gap-1 text-[24px] md:text-[48px] font-bold max-w-[400px] md:max-w-[600px] lg:max-w-[800px]">
      <span>
        <CmsPreviewText
          sectionName="hero_section"
          inputNameEn="first_title"
          initialValue={title}
        />
      </span>
      <br className="hidden lg:block" />
      <span className="text-secondary-main">
        {" "}
        <CmsPreviewText
          sectionName="hero_section"
          inputNameEn="second_title"
          initialValue={titleHighlight}
        />{" "}
      </span>
    </h1>
  );
}