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

import icon1 from "../../../public/icons/countables/1.png";
import icon2 from "../../../public/icons/countables/2.png";
import icon3 from "../../../public/icons/countables/3.png";
import icon4 from "../../../public/icons/countables/4.png";
import HomeCountable from "../../molecules/home-countable/HomeCountable";

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

  return (
    <article>
      <div className="wrapper grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <HomeCountable title={t("Years Experience")} icon={icon1} number={yearsNumber} />
        <HomeCountable title={t("Projects")} icon={icon2} number={projectsNumber} />
        <HomeCountable title={t("Clients")} icon={icon3} number={clientsNumber} />
        <HomeCountable title={t("Awards")} icon={icon4} number={awardsNumber} />
      </div>
    </article>
  );
};

export default HomeCountables;