import { cn } from "@/lib/utils";
import Image from "next/image";
import { getLocale, getTranslations } from "next-intl/server";
import ExperienceIcon from "../../../assets/icons/experience.svg";
import ReachIcon from "../../../assets/icons/reach.svg";
import SecurityIcon from "../../../assets/icons/security.svg";
import AnalyticsIcon from "../../../assets/icons/analytic.svg";
import {
  localeBodyClass,
  localeBodyWeightClass,
  localeHeadingClass,
} from "@/lib/locale-fonts";

const iconMap = {
  experience: ExperienceIcon,
  reach: ReachIcon,
  security: SecurityIcon,
  analytics: AnalyticsIcon,
};

export default async function WhyChooseSirius() {
  const t = await getTranslations("Solutions.whyChooseSirius");
  const locale = await getLocale();
  const items = t.raw("items");

  return (
    <div className="bg-sidebar flex w-full flex-col items-center justify-center gap-6 px-5 py-10 lg:gap-8 lg:py-28 xl:px-45">
      <h2
        className={cn(
          "text-center text-3xl text-neutral-700 uppercase",
          localeHeadingClass(locale),
        )}
      >
        {t("title")}
      </h2>
      <div className="mt-16 grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
        {items.map((item, index) => {
          const currentIcon = iconMap[item.type] || ExperienceIcon;

          return (
            <div
              key={index}
              className="flex flex-col items-center gap-6 rounded-2xl bg-white p-8 transition-all"
            >
              <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-slate-50">
                <Image
                  src={currentIcon}
                  alt={item.title}
                  width={32}
                  height={32}
                  className="block h-8 w-8"
                />
              </div>

              <div className="flex flex-col gap-2 pt-1">
                <h3
                  className={cn(
                    "text-chaosBlack text-lg font-semibold",
                    localeBodyClass(locale),
                  )}
                >
                  {item.title}
                </h3>
                <p
                  className={cn(
                    "text-sm leading-7 text-black md:text-lg",
                    localeBodyClass(locale),
                    localeBodyWeightClass(locale),
                  )}
                >
                  {item.description}
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}