"use client";
import {
  ExpertiseWedig,
  ServiceInfo,
  ServiceWedig,
  Technical,
  TechnicalWedig,
} from "@/generated/types";
import Image from "next/image";
import { useEffect, useState } from "react";
import { useTranslation } from "../../app/i18n";
import styles from "./expertise.module.scss";

type ExpertiseProps = {
  lng: string;
  expertises: ExpertiseWedig[];
  services: ServiceWedig;
  technicals: TechnicalWedig;
};
type RootLayoutProps = {
  params: ExpertiseProps;
};

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

export default function Expertise({
  params: { lng, expertises, services, technicals },
}: RootLayoutProps) {
  const [t, setT] = useState<TranslationFunction | null>(null);
  const [i18n, setI18n] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const { t, i18n } = await useTranslation(lng, "second-page");
      setT(() => t);
      setI18n(i18n);
    };

    fetchData();
  }, [lng]);


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

  return (
    <>
      <div className={`mb-8 2xl:mb-20`}>
        <div className="relative grid sm:flex left-0 w-full justify-between">
          {expertises &&
            expertises.length > 0 &&
            expertises.map((expertise: ExpertiseWedig, index: number) => {
              return (
                <div
                  className={`${styles.width_expertise} ${styles.width_big_screen} rounded-lg sm:w-40 mb-1.5 md:mb-4 lg:w-60 bg-white px-3 pb-2 pt-8 lg:py-4 dark:bg-slate-900 mt-2 `}
                  key={index}
                >
                  <div className="relative">
                    <div className="absolute inset-0 flex items-center mb-2 justify-center dark:bg-slate-900 ">
                      <Image
                        src={
                          expertise.image?.url
                        }
                        alt={
                          expertise.image?.alt && 
                          expertise.image?.alt.length > 0 ? expertise.image?.alt : 'services' + index
                        }
                        className={`${styles.image} dark:bg-white dark:rounded`}
                        width={10}
                        height={15}
                      />
                    </div>
                  </div>
                  <br></br>
                  <div className={`${styles.services} grid items-center text-center dark:bg-slate-900 ` }>
                    <h3 className={`${styles.title} dark:text-white text-black`}>{expertise?.title}</h3>
                    <p className={`${ styles.description_services} relative text-sm mt-2 z-50 dark:text-white`}>
                      {expertise?.description}
                    </p>
                  </div>
                </div>
              );
            })}
        </div>
        <div className="dark:bg-slate-900  relative grid md:flex mt-5 sm:mt-3 w-full max-w-full justify-between pl-5">
          <div className="bg-transparent mt-0 sm:mt-1 z-50 w-full md:w-1/4 mr-2 mb-1 sm:mb-2">
            <div className="ml-0.5 w-4 h-1 font-arial bg-gray-950"></div>
            <div className={`flex md:grid`}>
              <h1 className={`${styles.title_services} font-bold text-2xl text-gray-900 mr-2 sm:mr-0 dark:text-white `}>
                {t("service.service_one")}
              </h1>
              <h1 className={styles.service_title}>
                {"  "} {t("service.service_two")}
              </h1>
            </div>
            <p className={` ${ styles.description_services } ${ styles.description_size } text-sm sm:text-lg mr-2 dark:text-white`}>
              {services?.description}
            </p>
          </div>
          <div className="relative md:w-3/4 bg-gradient-to-r dark:from-slate-400 from-blue-400 z-40 via-blue-200 to-gray-800 rounded-lg h-auto sm:h-32 xl:h-36">
            <div className="w-full grid grid-cols-2 px-6 sm:px-14 sm:flex flex-row left-1 right-1 justify-evenly mt-7">
              {services &&
                services?.serviceInfo?.length > 0 &&
                services?.serviceInfo.map(
                  (service: ServiceInfo, index: number) => {
                    return (
                      <div
                        className="bg-white rounded-md mx-1.5 sm:mx-2 mb-3 sm:mb-1 lg:mx-3 h-36 md:h-40 w-22 lg:w-36 xl:w-44 2xl:w-52 flex-grow"
                        key={index}
                      >
                        <div className="relative top-6 w-auto flex justify-center items-center">
                          <div className="absolute inset-0 h-16 w-16 flex bg-gray-300 rounded-full mx-auto items-center mb-2 justify-center">
                            <Image
                              src={
                                service.image?.url
                              }
                              alt={
                                service.image?.alt &&
                                service.image?.alt.length > 0
                                  ? service.image?.alt
                                  : "infoService" + index
                              }
                              className="z-50 bottom-8 mt-1 h-6 w-8 mx-auto"
                              width={3}
                              height={3}
                            />
                          </div>
                        </div>
                        <h3 className={`${styles.service_list} relative top-20 lg:top-8 mt-6 mx-1.5 lg:mt-16 font-bold text-gray-950 text-center`}>
                          {service?.name.toUpperCase()}
                        </h3>
                      </div>
                    );
                  }
                )}
            </div>
          </div>
        </div>
        <div className="relative mt-3 lg:mt-8 z-20 dark:bg-slate-950  py-8">
          <div className="grid md:flex">
            <div className="relative grid sm:flex justify-evenly w-full md:w-1/3">
              <div className=" mt-0 md:mt-10">
                <Image
                  src="/assets/static/images/back.png"
                  placeholder="empty"
                  alt="service_back_one"
                  className=" px-1 py-1 2xl:h-44 2xl:w-64 rounded-xl hidden md:inline"
                  width={120}
                  height={120}
                  priority
                />
              </div>
              <div className="mt-1">
                <Image
                  src="/assets/static/images/Rectangle_24.png"
                  placeholder="empty"
                  alt="service_back_two"
                  className=" px-1 py-1 rounded-md 2xl:h-48 2xl:w-72 hidden md:inline"
                  width={180}
                  height={180}
                  priority
                />
              </div>
              <div className=" sm:absolute z-50 left-5 md:left-8 lg:left-14 xl:left-20 2xl:left-36 top-20">
                <Image
                  src="/assets/static/images/Rectangle_22.png"
                  placeholder="empty"
                  alt="service_back_three"
                  className=" px-1 py-1 rounded-md 2xl:h-64 2xl:w-96 hidden md:inline"
                  width={310}
                  height={310}
                  priority
                />
              </div>
            </div>
            <div className="w-full md:w-2/3 md:pl-10 mb-3 px-5">
              <div className="bg-transparent">
                <div className=" ml-0.5 w-4 h-1 font-arial bg-gray-950"></div>
                <div className={`grid sm:flex md:grid`}>
                  <h1 className={`${styles.title_services} text-2xl text-gray-900 dark:text-white`}>
                    {t("skills.title_one")}
                  </h1>
                  <h1 className={styles.service_title}>
                    {"  "} {t("skills.title_two")}
                  </h1>
                </div>
                <p className={` ${styles.description_services } mr-6 sm:text-lg dark:text-white`}>
                  {technicals?.intro}
                </p>
                <div className="mt-1 sm:mt-5">
                  <div className={` ${ styles.description_services } flex flex-wrap l-3 sm:ml-0 text-sm sm:text-lg `}>
                    {technicals &&
                      technicals?.technicalName?.length > 0 &&
                      technicals?.technicalName.map(
                        (techno: Technical, index ) => (
                                    <div  key={index} className="mx-5 my-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:bg-black dark:text-white">{techno.name}</div>
                        )
                      )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}