"use client";

import { solutionCardsData } from "@/data/data";
import SolutionCard from "./solution-card";
import FadeInWhenVisible from "../fade-in-when-visible/FadeInWhenVisible";
import clsx from "clsx";
import useIsMobile from "@/hooks/useMobile";
import useEmblaCarousel from "embla-carousel-react";
import AutoScroll from "embla-carousel-auto-scroll";
import { useEffect } from "react";

export default function SolutionSection() {
  const isMobile = useIsMobile();

  const [emblaRef, emblaApi] = useEmblaCarousel(
    {
      loop: true,
      dragFree: true,
      duration: 30,
    },
    [
      AutoScroll({
        speed: 0.8,
        direction: "forward",
        playOnInit: true,
        stopOnInteraction: false,
        stopOnMouseEnter: true,
      }),
    ]
  );

  return (
    <div className="w-full flex flex-col pt-20 lg:pb-20 lg:px-40">
      <div className="flex flex-col items-center gap-10">
        <FadeInWhenVisible>
          <h1 className="font-extrabold tracking-tight text-[2.5rem] text-[#828282] text-center lg:text-5xl">
            The Solution
          </h1>
        </FadeInWhenVisible>
        <FadeInWhenVisible className="w-full self-center flex items-center justify-center lg:w-1/2">
          <p className="text-[#868686] w-10/12 text-center text-sm lg:text-base lg:w-full">
            With our propriety optics design and patent pending solar tracker
            mechanism we overcome the drop of efficiency in single-axis solar
            concentrator when the sun is not aligned in the azimuth angle. The
            unique value proposition we create are
          </p>
        </FadeInWhenVisible>

        
          <FadeInWhenVisible className="w-full overflow-hidden">
            <div className="embla overflow-hidden" ref={emblaRef}>
              <div className="flex gap-4 px-4 h-120">
                {solutionCardsData.map((card, index) => (
                  <div className="flex w-[100%] mx-5 self-center" key={index}>
                    <SolutionCard
                      content={card.content}
                      icon={card.icon}
                      index={index}
                    />
                  </div>
                ))}
              </div>
            </div>
          </FadeInWhenVisible>
        
      </div>
    </div>
  );
}