import fetchData from "@/api/fetch-data";
import Link from "next/link";
import React from "react";
import { FaCheckCircle } from "react-icons/fa";
import { TbXboxXFilled } from "react-icons/tb";
import { GoHome } from "react-icons/go";
import { FaSignInAlt } from "react-icons/fa";
import { getLocale, getTranslations } from "next-intl/server";

// By Mohammed Hossam
// Date 21-10-2024
// desc alert page

// Edit By Ahmed Badran
// Edit At 8-11-2024

export default async function Activate({ params }) {
  const { id } = params;
  const t = await getTranslations("shared");
  const locale = await getLocale();
  const { message, data, status, error } = await fetchData({
    endPoint: `/user/activate/${id}`,
    locale,
  });
  const customError = error ? error : status === "error" ? true : false;
  return (
    <section>
      <div className="container  flex items-center justify-center  flex-col bg-[#FAFBFC] pb-10  h-[80vh] space-y-5 ">
        {customError ? (
          <TbXboxXFilled className="text-red-500 text-2xl md:text-4xl" />
        ) : (
          <FaCheckCircle className="text-green-500 text-2xl md:text-4xl" />
        )}
        <h1 className="font-light text-2xl md:text-4xl">
          {Array.isArray(data) ? data[0] : message}
        </h1>
        {customError ? (
          <Link href="/">
            <button className="btn-main-outline gap-x-3 flex items-center rounded-sm md:text-xl p-2">
              <GoHome />
              {t("go-to-home")}
            </button>
          </Link>
        ) : (
          <Link href="/sign-in">
            <button className="btn-main-outline gap-x-3 flex items-center rounded-sm md:text-xl p-2">
              <FaSignInAlt />
              {t("sign-in")}
            </button>
          </Link>
        )}
      </div>
    </section>
  );
}
