"use client";

import React, { useRef, useEffect } from "react";
import { ArrowUpRight } from "lucide-react";

const FeatureSection = () => {
  const sliderRef = useRef<HTMLDivElement>(null);
  const autoplayIntervalRef = useRef<number | undefined>(undefined);

  const scrollLeft = () => {
    if (sliderRef.current) {
      sliderRef.current.scrollBy({ left: -200, behavior: "smooth" });
    }
  };

  const scrollRight = () => {
    if (sliderRef.current) {
      sliderRef.current.scrollBy({ left: 200, behavior: "smooth" });
    }
  };

  const items = [
    "Campaign",
    "Track",
    "Report",
    "Discuss",
    "Live Meet",
    "Campaign",
    "Track",
    "Report",
    "Discuss",
    "Live Meet",
    "Campaign",
    "Track",
    "Report",
    "Discuss",
    "Live Meet",
  ];

  const autoplay = () => {
    if (sliderRef.current) {
      const maxScrollLeft =
        sliderRef.current.scrollWidth - sliderRef.current.clientWidth;

      if (sliderRef.current.scrollLeft >= maxScrollLeft) {
        sliderRef.current.scrollTo({ left: 0, behavior: "smooth" });
      } else {
        sliderRef.current.scrollBy({ left: 200, behavior: "smooth" });
      }
    }
  };

  useEffect(() => {
    autoplayIntervalRef.current = window.setInterval(autoplay, 3000);

    return () => {
      if (autoplayIntervalRef.current) {
        clearInterval(autoplayIntervalRef.current);
      }
    };
  }, []);

  return (
    <section
      id="features"
      className=" scroll-mt-[65px] relative mx-auto py-6 md:py-12 container"
    >
      <div
        ref={sliderRef}
        className="bg-primary-900 text-white rounded-lg px-8 py-4 flex space-x-10 overflow-x-auto no-scrollbar"
      >
        {items.map((item, index) => (
          <div key={index} className="flex items-center space-x-2 min-w-max">
            <span className="text-lg">{item}</span>
            <div className="bg-gray-700/80 rounded-full p-2">
              <ArrowUpRight size={12} />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default FeatureSection;