"use client";

import { FC, JSX } from "react";
import { OptionDataTypes } from "@/types/types";
import { ThemeCustomizationTranslationNode } from "@/types/theme/theme-customization";
import { usePathname } from "next/navigation";
import { safeParse } from "@utils/helper";
import VectorIcon from "@components/common/icons/service/VectorIcon";
import TruckIcon from "@components/common/icons/service/TruckIcon";
import SofaIcon from "@components/common/icons/service/SofaIcon";
import AssuranceIcon from "@components/common/icons/service/AssuranceIcon";

export interface ServiceContentDataTypes {
  name?: string;
  serviceData: ThemeCustomizationTranslationNode[];
}

export interface ServiceContenRenderTypes {
  serviceList: {
    options: OptionDataTypes;
  };
}

const ServiceContent: FC<ServiceContentDataTypes> = ({ serviceData }) => {
  const pathname = usePathname();

  if (
    pathname === "/customer/login" ||
    pathname === "/customer/register" ||
    pathname === "/customer/forget-password"
  ) {
    return null;
  }

  return (
    <div className="mx-auto my-16 mt-16 sm:mt-0 w-full lg:my-12 md:my-20 md:max-w-4xl px-4 py-8">
      {serviceData?.slice(0, 1)?.map((service, index: number) => {
        const options =
          typeof service.options === "string"
            ? safeParse(service.options)
            : service.options;

        return <ServiceCarouselRender key={index} serviceList={{ options }} />;
      })}
    </div>
  );
};

const iconMapping: Record<string, JSX.Element> = {
  "icon-truck": <VectorIcon />,
  "icon-product": <TruckIcon />,
  "icon-dollar-sign": <SofaIcon />,
  "icon-support": <AssuranceIcon />,
};

const ServiceCarouselRender: FC<ServiceContenRenderTypes> = ({
  serviceList,
}) => {
  const { options } = serviceList;
  const { services } = options;

  return (
    <div className="flex items-center justify-center gap-6 max-lg:flex-wrap max-md:grid max-md:grid-cols-2 max-md:gap-x-4 max-md:gap-y-8 max-md:text-center md:gap-10 lg:gap-20">
      {services?.map((list, index: number) => {
        const iconKey = list?.service_icon;

        return (
          <div
            key={index}
            className="flex flex-col items-center justify-center gap-3 max-md:gap-3 max-md:px-4 max-md:py-2"
          >
            {iconMapping[iconKey]}
            <p className="mt-2.5 max-w-[217px] text-center font-outfit text-sm font-medium max-md:mt-0 max-md:text-base max-sm:text-xs">
              {list.description}
            </p>
          </div>
        );
      })}
    </div>
  );
};

export default ServiceContent;
