import { ArrowLeft } from "iconsax-reactjs";
import { type FC } from "react";

const FooterNewsletter: FC = () => {
  return (
    <div className="flex w-full max-w-[360px] flex-col gap-4 lg:ms-auto">
      <p className="text-sm leading-6 font-bold text-[#0A1B2C]">برای دریافت آخرین پیشنهادها، اخبار و مطالب الهام‌بخش، در خبرنامه ما عضو شوید.</p>
      <form className="relative" action="#">
        <input
          type="email"
          placeholder="ایمیل شما"
          className="h-12 w-full rounded-full border border-[#E9EEF2] bg-[#F1F6FA] ps-5 pe-14 text-sm text-[#3A4147] placeholder:text-[#9AA6B2]"
        />
        <button type="submit" aria-label="عضویت در خبرنامه" className="absolute top-1/2 left-1.5 flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-[#0A1B2C] text-white transition-colors hover:bg-[#0A1B2C]/90">
          <ArrowLeft size={18} color="currentColor" />
        </button>
      </form>
    </div>
  );
};

export default FooterNewsletter;