"use client";

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

function VerificationCodePage() {
  const t = useTranslations("Verfication");
  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">
          <h2 className="text-[#03B89E] text-[30px] sm:text-[45px] font-[700] mb-[15px] text-center">
            {t("verfication-title")}
          </h2>
          <p className="text-[#8C8C8C] text-[13px] sm:text-[16px] font-[600] mb-[30px] text-center w-[410px] max-[460px]:w-full">
            {t("verfication-desc")}
          </p>
          <form className="flex flex-col gap-[20px] w-[410px] max-[460px]:w-full">
            <div className="flex justify-center flex-wrap gap-[15px] sm:gap-[30px] mb-[10px]">
              {Array(4)
                .fill("")
                .map((_, index) => (
                  <input
                    key={index}
                    type="text"
                    maxLength={1}
                    className="w-[50px] sm:w-[60px] h-[50px] sm:h-[60px] border border-[#D9D9D9] rounded-lg text-center text-[24px] text-[#03B89E] font-[700] focus:outline-[#03B89E]"
                  />
                ))}
            </div>
            <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("verfication-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>
            <p className="text-[#FF4D4F] text-[12px] sm:text-[14px] font-[600] text-center mt-[10px] cursor-pointer">
              {t("verfication-desc2")}
            </p>
          </form>
        </div>
      </div>
    </section>
  );
}

export default VerificationCodePage;