"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 { testimonials } from "src/constans";
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";

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

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveIndex((prevIndex) =>
        prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
      );
    }, 6000); // 5 seconds interval

    return () => clearInterval(interval); // Cleanup interval on component unmount
  }, []);

  console.log(activeIndex);
  return (
    <div className={`  rounded-[20px]`}>
      <div className={`bg-tertiary rounded-2xl  ]`}>
        <motion.div variants={textVariant()}>
          <div className="flex">
            <div className="w-[120px] mt-[90px]">
              <Image src={phi} />
            </div>
            <span className="text-primary-300 text-[150px]  relative top-[60px] !h-fit font-bold">
              HI
            </span>
          </div>

          <p className="mb-0 text-white">
            {" "}
            Coffee taste always matters the most. With PHI, it will always be
            perfect. Phi means the golden ratio. If you brew your coffee with
            the golden ratio, it will always taste good. In the Phi section,
            there are three boxes that the barista on shift should fill. These
            are the main elements for adjusting the daily coffee recipe:
          </p>
        </motion.div>
      </div>
      <div className={` pb-14 sm:py-16 grid lg:grid-cols-2 xs:grid-cols-1 `}>
        <div>
          {testimonials.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.testimonial}
                  </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">
        {" "}
        Your barista enters the daily recipe, which will be recorded in your
        database. You can view your adjustment chart see what’s happening in
        your bar, and check the quality of your coffee serving in your store.
      </p>
    </div>
  );
};

export default SectionWrapper(Feedbacks, "platform");