import React from "react";
import { useTranslation } from "next-i18next";

import styles from "./AboutUsCountables.module.scss";

import Countable from "../../molecules/countable";

import icon1 from "../../../public/icons/countables/1white.png";
import icon2 from "../../../public/icons/countables/2white.png";
import icon3 from "../../../public/icons/countables/3white.png";
import icon4 from "../../../public/icons/countables/4white.png";

const AboutUsCountables = ({ yearsNumber, projectsNumber, clientsNumber, awardsNumber }: any) => {
  const { t } = useTranslation("common");

  return (
    <article className={styles.aboutUsCountables}>
      <div className="bg-image"></div>

      <div className="flex justify-center">
        <div className="content">
          <div className="wrapper flex justify-between flex-wrap md:flex-nowrap">
            <div className="max-md:basis-1/2 mb-12 md:mb-0">
              <Countable
                title={t("Years Experience")}
                icon={icon1}
                number={yearsNumber}
                variant="transparent"
              />
            </div>

            <div className="max-md:basis-1/2 mb-12 md:mb-0">
              <Countable
                title={t("Projects")}
                icon={icon2}
                number={projectsNumber}
                variant="transparent"
              />
            </div>

            <div className="max-md:basis-1/2">
              <Countable
                title={t("Clients")}
                icon={icon3}
                number={clientsNumber}
                variant="transparent"
              />
            </div>

            <div className="max-md:basis-1/2">
              <Countable
                title={t("Awards")}
                icon={icon4}
                number={awardsNumber}
                variant="transparent"
              />
            </div>
          </div>
        </div>
      </div>
    </article>
  );
};

export default AboutUsCountables;