import { Button } from "@/components/ui/button";
import { MdArrowBackIos, MdArrowForwardIos } from "react-icons/md";
import { getLocale, getTranslations } from "next-intl/server";
import Link from "next/link";
import { CMSItem } from "@/types/cms";
import { cmsText, cmsValue } from "@/services/cmsService";
import CmsPreviewText from "@/components/preview/CmsPreviewText";

export default async function HeroButtons({ cms }: { cms: CMSItem[] }) {
  const locale = await getLocale();
  const t = await getTranslations("HeroSection");
  const isArabic = locale === "ar";
  const arrowIcon = isArabic ? (
    <MdArrowBackIos className="mt-1" />
  ) : (
    <MdArrowForwardIos className="mt-1" />
  );

  const firstButtonText = cmsText(cms, "first_button_text", locale, t("startExperience"));
  const firstButtonUrl =
    (cmsValue(cms, "first_button_url") as { url?: string } | undefined)?.url || "/subscribe";
  const secondButtonText = cmsText(cms, "second_button_text", locale, t("exploreMore"));
  const secondButtonUrl =
    (cmsValue(cms, "second_button_url") as { url?: string } | undefined)?.url || "/subscribe";

  return (
    <div className="flex gap-5">
      <Button asChild>
        <Link href={firstButtonUrl}>
          <span>
            <CmsPreviewText
              sectionName="hero_section"
              inputNameEn="first_button_text"
              initialValue={firstButtonText}
            />
          </span>
          {arrowIcon}
        </Link>
      </Button>
      <Button variant="ghost" asChild>
        <Link href={secondButtonUrl}>
          <span>
            <CmsPreviewText
              sectionName="hero_section"
              inputNameEn="second_button_text"
              initialValue={secondButtonText}
            />
          </span>
          {arrowIcon}
        </Link>
      </Button>
    </div>
  );
}