import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { MdOutlineEmail } from "react-icons/md";
import { getLocale, getTranslations } from "next-intl/server";

export default async function SubscribeSection() {
  const t = await getTranslations("Footer");
  const locale = await getLocale();
  const isArabic = locale === "ar";

  return (
    <div className="flex flex-col gap-4">
      <h3 className="text-[14px] sm:text-[18px] font-bold">
        {t("subscribeTitle")}
      </h3>
      <div className="flex flex-col sm:flex-row md:items-center gap-4">
        <div className="relative w-full sm:flex-1">
          <Input
            placeholder={t("emailPlaceholder")}
            className={`${
              isArabic ? "pr-10 pl-4" : "pl-10 pr-4"
            } w-full py-2.5`}
            type="email"
          />
          <MdOutlineEmail
            className={`absolute ${
              isArabic ? "right-3" : "left-3"
            } top-1/2 -translate-y-1/2 text-text-main/60 size-5 sm:size-6 pointer-events-none`}
          />
        </div>
        <Button className="w-fit py-2.5 px-4">{t("contactUs")}</Button>
      </div>
    </div>
  );
}