"use client";

import { ArrowRightOutlined } from "@ant-design/icons";
import { useTranslations, useLocale } from "next-intl";

function SuccessfullyDone() {
  const t = useTranslations("Done");
  const currentLocale = useLocale();
  const isRTL = currentLocale === "ar";

  return (
    <section className="pt-[180px] pb-[20px]">
      <div className="container mx-auto px-3 sm:px-0 flex flex-col justify-center items-center">
        <div className="w-[100%] sm:w-[620px] py-[50px] px-[10px] sm:px-[25px] border border-[#D9D9D9] rounded-lg flex flex-col justify-center items-center pt-[150px]">
          <h2 className="text-[#03B89E] text-[30px] sm:text-[45px] font-[700] mb-[15px] text-center">
            {t("done-title")}
          </h2>

          <button className="w-[262px] max-[460px]:w-full mx-auto h-[50px] sm:h-[56px] bg-[#03B89E] text-white rounded-md text-[20px] sm:text-[24px] font-[600] flex items-center justify-center border border-[#03B89E] hover:bg-[#fff] hover:text-[#03B89E] transition-colors duration-500 group">
            {t("done-btn")}
            <ArrowRightOutlined
              className={`mx-[7px] bg-[#fff] text-[#03B89E] p-[4px] rounded-full text-[14px] transition-colors duration-300 group-hover:bg-[#03B89E] group-hover:text-[#fff] ${
                isRTL ? "rotate-180" : ""
              }`}
            />
          </button>
        </div>
      </div>
    </section>
  );
}

export default SuccessfullyDone;