"use client";

import { useTranslations } from "next-intl";
import { RiGraduationCapFill } from "react-icons/ri";
import { FaBriefcase } from "react-icons/fa";
import { HiUsers } from "react-icons/hi";
import { FaVideo } from "react-icons/fa";

export default function Categories() {
  const t = useTranslations("heroSection.categories");

  const categories = [
    {
      icon: RiGraduationCapFill,
      title: t("educational"),
      gradient: "var(--color-radial-gradient-2)",
      key: "educational",
    },
    {
      icon: FaBriefcase,
      title: t("corporate"),
      gradient: "var(--color-radial-gradient)",
      key: "corporate",
    },
    {
      icon: HiUsers,
      title: t("lifestyle"),
      gradient: "var(--color-radial-gradient-2)",
      key: "lifestyle",
    },
    {
      icon: FaVideo,
      title: t("entertainment"),
      gradient: "var(--color-radial-gradient)",
      key: "entertainment",
    },
  ];

  return (
    <div className="bg-background-dark h-[25vh] md:h-[20vh] px-5 md:px-10 lg:px-20">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-5 md:gap-10 relative top-[-90px] md:top-[-50px]">
        {categories.map((category, index) => {
          const Icon = category.icon;
          return (
            <div
              key={category.key}
              className="p-2.5 md:p-7 rounded-[16px] flex flex-col items-center justify-center gap-2"
              style={{ background: category.gradient }}
            >
              <Icon className="size-10 text-white" />
              <h3 className="font-bold text-center text-white text-[12px] md:text-[14px] lg:text-[16px]">
                {category.title}
              </h3>
            </div>
          );
        })}
      </div>
    </div>
  );
}