'use client'
import { BaseContent } from '@/types/common.type'
import Image from 'next/image'
import React, { useState, useEffect } from 'react'

export default function Products({ data }: { data: BaseContent | undefined }) {
  const [currentIndex, setCurrentIndex] = useState(0)

  
  useEffect(() => {
    if (!data || data.subsections.length <= 1) return

    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) =>
        prevIndex === data.subsections.length - 1 ? 0 : prevIndex + 1
      )
    }, 8000)

    return () => clearInterval(interval)
  }, [data]) 

  if (!data) return null

  return (
    <section className="bg-[#1A2B3C] text-white ">
      <div className=" container px-4 mx-auto pt-20">
        {/* Title */}
        <h1 className="text-2xl sm:text-3xl md:text-[42px] font-bold mb-4 relative inline-block ">
          {data.title}
          <span className="absolute left-0 bottom-[-8px] w-2/3 h-[2px] bg-white"></span>
        </h1>

        {/* Slider */}
        <div className="relative w-full overflow-hidden mt-5 md:mt-20">
          <div
            className="flex transition-transform duration-700 ease-in-out"
            style={{ transform: `translateX(-${currentIndex * 100}%)` }}
          >
            {data.subsections.map((slide) => (
              <div
                key={slide.id}
                className="min-w-full flex flex-col md:flex-row gap-4 md:gap-5 items-center"
              >

                <div className="w-full md:w-[415px] shrink-0">
                  <Image
                    src={slide.image}
                    alt={slide.title}
                    width={400}
                    height={400}
                    className="object-contain md:object-cover w-full md:w-[405px] h-[auto] md:h-[400px] max-w[100%]"
                  />
                </div>

                <div className="text-white mb-10 lg:mb-16">
                  <h3 className="text-2xl lg:text-4xl font-normal  mb-9">{slide.title}</h3>

                  <div
                    className="text-base text-gray-100 mb-4 max-w-xl font-normal"
                    dangerouslySetInnerHTML={{ __html: slide.description }}
                  />
                </div>
              </div>
            ))}
          </div>

          {/* Dots Indicator Only */}
          <div className="absolute flex justify-center space-x-3 left-1/2 transform -translate-x-1/2 top-[95%] md:top-[90%]">
            {data.subsections.map((_, i) => (
              <div
                key={`dot-${i}`}
                onClick={() => setCurrentIndex(i)}
                className={`w-3 h-3 rounded-full cursor-pointer transition-all duration-300 ${i === currentIndex ? 'bg-white scale-110' : 'border border-white hover:bg-white/50'
                  }`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}