import Image from "next/image";
import { cn } from "@/lib/utils";
import { getLocale, getTranslations } from "next-intl/server";
import {
  localeBodyClass,
  localeBodyWeightClass,
  localeHeadingClass,
} from "@/lib/locale-fonts";

import SpeakerIcon from "../../../../assets/icons/speaker.svg";
import ScheduleIcon from "../../../../assets/icons/calendar.svg";
import CardIcon from "../../../../assets/icons/card.svg";
import SecurityIcon from "../../../../assets/icons/security.svg";
import SupportIcon from "../../../../assets/icons/handshake.svg";

export default async function WhatWeDo() {
  const t = await getTranslations("AboutUs.whatWeDo");
  const locale = await getLocale();

  const rowItems = t.raw("items");

  const renderIcon = (type) => {
    const className = "h-8 w-8 text-primaryPurple-400";

    const icons = {
      increaseVisibility: SpeakerIcon,
      convenienceAndEfficiency: ScheduleIcon,
      customizableSolutions: CardIcon,
      security: SecurityIcon,
      support: SupportIcon,
    };
    const Icon = icons[type];
    // return Icon ? <Icon className={className} /> : null;
    return <Image src={Icon} alt={type} className={className} />;
  };

  return (
    <div className="bg-primary-foreground flex flex-col items-center justify-center px-5 py-10 md:py-20 lg:px-20">
      <h2
        className={cn(
          "mt-6 text-center text-3xl text-base font-bold text-neutral-700 uppercase",
          localeHeadingClass(locale),
        )}
      >
        {t("title")}
      </h2>
      <p
        className={cn(
          "mt-4 max-w-2xl text-center text-lg text-neutral-600",
          localeBodyClass(locale),
        )}
      >
        {t("description")}
      </p>

      <div className="mt-10 grid w-full max-w-4xl grid-cols-1 gap-6 md:grid-cols-2">
        {rowItems.map((item, index) => {
          const isLastOdd =
            rowItems.length % 2 !== 0 && index === rowItems.length - 1;

          return (
            <div
              key={index}
              className={cn(
                "mt-10 flex w-full max-w-4xl flex-col items-center justify-center gap-4 rounded-lg bg-slate-50 bg-white p-6",
                isLastOdd && "md:col-span-2",
              )}
            >
              <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-slate-50">
                {renderIcon(item.type)}
              </div>
              <h3
                className={cn(
                  "text-center text-lg font-bold",
                  localeHeadingClass,
                )}
              >
                {item.title}
              </h3>
              <p className={cn("text-center text-gray-600", localeBodyClass)}>
                {item.description}
              </p>
            </div>
          );
        })}
      </div>

      <p
        className={cn(
          "mt-8 max-w-2xl text-center text-sm text-black lg:text-lg",
          localeBodyClass(locale),
        )}
      >
        {t("description2")}
      </p>
    </div>
  );
}