"use client";
import { ComponentInfoService } from "@/generated/types";
import styles from "./expertise.module.scss";
import { useEffect, useState } from "react";
import { useTranslation } from "../../app/i18n";

type Params = {
  lng: string;
  services: any;
};
type ServiceProps = {
  params: Params;
};

type TranslationFunction = (key: string) => string;

export default function Service({ params: { lng, services } }: ServiceProps) {
  const [t, setT] = useState<TranslationFunction | null>(null);
  const [i18n, setI18n] = useState(null);
  useEffect(() => {
    const fetchLanguage = async () => {
      const { t, i18n } = await useTranslation(lng, "second-page");
      setT(() => t);
      setI18n(i18n);
    };
    fetchLanguage();
  }, [lng]);

  if (!t || !i18n) {
    return null;
  }

  const renderElements = () => {
    const rows = [];
    const totalRows = Math.ceil(
      (services?.attributes?.serviceInfo.length ?? 0) / 3
    );

    for (let i = 0; i < totalRows; i++) {
      const startIndex = i * 3;
      const row = services?.attributes?.serviceInfo.slice(
        startIndex,
        startIndex + 3
      );
      rows.push(row);
    }

    return rows.map((row, rowIndex) => (
      <div
        key={rowIndex + `blogs`}
        className="grid xl:ml-10 w-full md:mr-12 xl:mx-32"
      >
        <div className="flex mx-0">
          {row?.map((service: ComponentInfoService, index: number) => (
            <div
              key={index}
              className="grid xl:flex mx-1.5 xl:mx-5 mb-5 shadow-md py-3 rounded-lg hover:bg-blue-200 sm:px-6 border-2 border-gray-800"
            >
              <div className=" w-1/2 md:mr-2 sm:mr-0">
                <h1
                  className={` ${styles.titleService} text-center mx-10 xl:mx-3 pt-6 font-bold text-xl mb-5 text-gray-950`}
                >
                  {service?.name}
                </h1>
              </div>
              <div
                className="md:mx-10 w-20 h-20 lg:w-40 lg:h-28"
                style={{
                  backgroundImage: `url(${service?.image?.data?.attributes?.url})`,
                  backgroundSize: "100% 100%",
                }}
              ></div>
            </div>
          ))}
        </div>
      </div>
    ));
  };

  return (
    <section
      style={{
        position: "relative",
        height: "auto",
        width: "100%",
      }}
    >
      <div
        style={{
          backgroundImage: `linear-gradient(180deg, rgba(181, 160, 160, 0.4), rgba(0, 0, 0, 0.4)), url('/assets/static/images/services.jpg')`,
          backgroundPosition: "0px 0px, 50% 50%",
          backgroundSize: "auto, cover",
          height: "auto",
          marginTop: "96px",
          width: "100%",
        }}
      >
        <div className="pt-36 relative flex justify-center items-center">
          <div className="text-center">
            <h1
              className={`${styles.services_title} text-white inline-block font-bold px-5 py-3 rounded-lg bg-gray-400`}
            >
              {t("service_item.title")}
            </h1>
            <p
              className={`${styles.services_descriptions} text-white px-20 lg:px-40 py-14`}
            >
              {services?.attributes?.descriptions}
            </p>
          </div>
        </div>
      </div>
      <div className=" my-5 mx-10">
        <h1
          className={`${styles.service_title} text-center lg:ml-20 items-center sm:text-left sm:ml-0.5`}
        >
          {t("service_item.title_item")}
        </h1>
        <div className="hidden sm:block w-full">{renderElements()}</div>
        <div className="grid w-full sm:hidden">
          {services?.attributes.serviceInfo &&
            services?.attributes.serviceInfo.length > 0 &&
            services?.attributes.serviceInfo.map(
              (service: ComponentInfoService, index: number) => {
                return (
                  <div key={index} className="flex w-full mx-5 mb-5 shadow-md">
                    <div className=" w-1/2 md:mr-2 sm:mr-0">
                      <h1
                        className={` ${styles.titleService} text-center pt-6 font-bold text-xl mb-5 text-gray-950`}
                      >
                        {service?.name}
                      </h1>
                    </div>
                    <div
                      className="md:mx-10 w-20 h-20 md:w-44 md:h-32"
                      style={{
                        backgroundImage: `url(${service?.image?.data?.attributes?.url})`,
                        backgroundSize: "100% 100%",
                      }}
                    ></div>
                  </div>
                );
              }
            )}
        </div>
      </div>
    </section>
  );
}