import React, { useMemo } from "react";
import Typography from "components/typography/Typography";
import CategoryCard from "components/Cards/CategoryCard";
import {
  SVGMedicine,
  SVGAgricultural,
  SVGHumanitarian,
  SVGSocials,
  SVGTechnicsAndTechology,
  SVGFundamental,
} from "components/icons";
import { useTranslation} from "react-i18next";

const categories = [
  { id: 1, title: "mainPage.featuredArticles.categories.Medical", count: 5617813, icon: <SVGMedicine /> },
  {
    id: 2,
    title: "mainPage.featuredArticles.categories.TechnicsAndTechlonogies",
    count: 5617813,
    icon: <SVGTechnicsAndTechology />,
  },
  { id: 3, title: "mainPage.featuredArticles.categories.Fundamental", count: 5617813, icon: <SVGFundamental /> },
  { id: 4, title: "mainPage.featuredArticles.categories.Humanitarian", count: 5617813, icon: <SVGHumanitarian /> },
  { id: 5, title: "mainPage.featuredArticles.categories.Agricultural", count: 5617813, icon: <SVGAgricultural /> },
  { id: 6, title: "mainPage.featuredArticles.categories.Social", count: 5617813, icon: <SVGSocials /> },
];

export function FeaturedArticlesCategories() {
  const [t, i18next] = useTranslation();

  const categoryCards = useMemo(
    () =>
      categories.map((category) => (
        <CategoryCard
          title={category.title}
          count={category.count}
          iconChild={category.icon}
        />
      )),
    categories
  );

  return (
    <section className="w-full items-center justify-center">
      <div className="pt-14 lg:pt-16 pb-4 md:pb-8 text-center">
        <Typography
          htmlTag="h1"
          fontWeightVariant="semibold"
          className="text-3xl mb-2"
        >
          {t("mainPage.featuredArticles.title")}
        </Typography>
        <Typography htmlTag="h2" className="text-base text-gray-500">
          {t("mainPage.featuredArticles.descriptionPart1")}<br className="visible sm:hidden" />
          {t("mainPage.featuredArticles.descriptionPart2")}
        </Typography>
      </div>
      <div className="py-8 px-10 flex md:flex justify-start md:justify-center md:flex-wrap overflow-x-scroll md:overflow-hidden snap-x  scroll-smooth overscroll-x-contain">
        {categoryCards}
      </div>
    </section>
  );
}