"use clients";
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";

import { SectionWrapper } from "src/hoc";
import { fadeIn, textVariant } from "src/utils/motion";
import { styles } from "src/style";
import Image from "next/image";
import phi from "@img/adjustw.png";
import phi1 from "../../src/assets/phi1.png";
import phi2 from "../../src/assets/phi2.png";
import phi3 from "../../src/assets/phi3.png";
import { useLocale, useTranslations } from "next-intl";

const phiData = () => {
  const t = useTranslations("phiData");
  return [
    {
      title: t("bcg.title"),
      desc: t("bcg.desc"),
    },
    {
      title: t("oeg.title"),
      desc: t("oeg.desc"),
    },
    {
      title: t("et.title"),
      desc: t("et.desc"),
    },
  ];
};

const Phi = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  console.log("object phiData().length", phiData().length);

  const t = useTranslations("phiData");

  const locale = useLocale();
  const isRTL = locale === "fa";

  console.log(activeIndex);
  return (
    <div className={`  rounded-[20px] ${isRTL ? "rtl" : "ltr"} `}>
      <div className={`bg-tertiary rounded-2xl `}>
        <motion.div variants={textVariant()}>
          <div className="flex ">
            {isRTL ? (
              <>
                <span className="text-primary-300 text-[30px] xs:text-[100px] sm:text-[150px] relative top-[5px] sm:top-[10px] font-bold xs:mt-[89px] lg:mt-[52px]">
                  {" "}
                  HI
                </span>
                <div className="xs:w-[100px] lg:w-[120px] mt-[90px]">
                  <Image src={phi} />
                </div>
              </>
            ) : (
              <>
                {" "}
                <div className="xs:w-[100px] lg:w-[120px] mt-[90px]">
                  <Image src={phi} />
                </div>
                <span className="text-primary-300 text-[30px] xs:text-[100px] sm:text-[150px] relative top-[5px] sm:top-[10px] font-bold xs:mt-[89px] lg:mt-[52px]">
                  {" "}
                  HI
                </span>
              </>
            )}
          </div>

          <p className="mb-0 text-white xs:mt-0 lg:mt-5"> {t("desc")}</p>
        </motion.div>
      </div>
      <div className={` pb-14 sm:py-16 grid lg:grid-cols-2 xs:grid-cols-1 `}>
        <div>
          {phiData().map((e, index) => (
            <motion.div
              key={index}
              variants={fadeIn("", "spring", index * 0.5, 0.75)}
              className={` p-5 rounded-3xl w-full tr03 cursor-pointer ${
                activeIndex == index ? "bg-[#35685952]" : ""
              }`}
              onClick={() => setActiveIndex(index)}
            >
              <h3
                className={`text-white  font-bold tr03 ${
                  activeIndex == index ? "text-[24px]" : "opacity-50"
                }`}
              >
                {e.title}
              </h3>

              {activeIndex == index && (
                <div className="mt-3">
                  <p className="text-white tracking-wider text-[16px] font-light">
                    {e.desc}
                  </p>
                </div>
              )}
            </motion.div>
          ))}
        </div>

        <motion.div variants={fadeIn("", "spring", 1 * 0.5, 0.75)}>
          <Image
            className="tr03"
            src={
              activeIndex == 0
                ? phi1
                : activeIndex == 1
                ? phi2
                : activeIndex == 2
                ? phi3
                : phi3
            }
          />
        </motion.div>
        {/* 
        <div>
          <Image src={phi2} />
        </div>

        <div>
          <Image src={phi3} />
        </div> */}
      </div>

      <p className="mb-0 text-white">{t("endDesc")}</p>
    </div>
  );
};

export default SectionWrapper(Phi, "Phi");