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";

const categories = [
  { id: 1, title: "Medical", count: 5617813, icon: <SVGMedicine /> },
  {
    id: 2,
    title: "Technics and Technology",
    count: 5617813,
    icon: <SVGTechnicsAndTechology />,
  },
  { id: 3, title: "Fundamental", count: 5617813, icon: <SVGFundamental /> },
  { id: 4, title: "Humanitarian", count: 5617813, icon: <SVGHumanitarian /> },
  { id: 5, title: "Argicultural", count: 5617813, icon: <SVGAgricultural /> },
  { id: 6, title: "Social", count: 5617813, icon: <SVGSocials /> },
];

export function FeaturedArticles() {
  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"
        >
          Featured articles
        </Typography>
        <Typography htmlTag="h2" className="text-base text-gray-500">
          Select the category of science <br className="visible sm:hidden" />
          you are interested in
        </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>
  );
}