/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */
import React from "react";
import { t as nextT } from "i18next";
import { useTranslation } from "react-i18next";
import { SearchBar } from "../../search/SearchBar";
import { formatNumber } from "core/helpers";

export default function MainSection() {
  const { t, i18n } = useTranslation();
  const amountArticles = 4202020;

  return (
    <section className="bg-main bg-center bg-cover bg-origin-border bg-no-repeat min-h-[100vh] py-32 px-2 sm:px-6 md:px-6 lg:px-0 items-center flex justify-center ">
      <div className="flex-col">
        <div className="m-auto text-center font-bold text-4xl ">
          {t("mainPage.title")}
        </div>
        <div className="flex flex-row items-center justify-center space-x-3 pt-2">
          <div className=" text-2xl text-gray-400">{t("mainPage.search")}</div>
          <div className=" text-3xl text-blue-500">
            {formatNumber(amountArticles)}
          </div>
          <div className=" text-2xl text-gray-400">
            {nextT("mainPage.article_many", {
              count: amountArticles,
            }).toString()}
          </div>
        </div>
        <div className="max-w-xl m-auto pt-16 ">
          <SearchBar />
          <div className="mt-7 pr-1 text-right font-semibold text-sm">
            {t("mainPage.advancedSearch")}
          </div>
        </div>
      </div>
    </section>
  );
}
