'use client';

import { useState, useEffect } from 'react';
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
import { translations } from '@/lib/constants';

export default function HeroSlider({ language }) {
  const t = translations[language];
  const [currentSlide, setCurrentSlide] = useState(0);

  const slides = [
    {
      title: t.hero.title,
      subtitle: t.hero.subtitle,
      bgColor: 'bg-gradient-to-r from-primary-600 to-primary-700',
      image: '🌾',
    },
    {
      title: 'Advanced Manufacturing Excellence',
      subtitle: 'State-of-the-art facilities ensuring superior quality',
      bgColor: 'bg-gradient-to-r from-accent-gold to-yellow-600',
      image: '🏭',
    },
    {
      title: 'Global Distribution Network',
      subtitle: 'Reaching 45+ countries with premium products',
      bgColor: 'bg-gradient-to-r from-blue-600 to-blue-700',
      image: '🌍',
    },
  ];

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 5000);
    return () => clearInterval(timer);
  }, [slides.length]);

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  };

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  };

  return (
    <section className="relative h-screen overflow-hidden">
      {/* Slides */}
      {slides.map((slide, index) => (
        <div
          key={index}
          className={`absolute inset-0 ${slide.bgColor} transition-opacity duration-500 ${
            index === currentSlide ? 'opacity-100' : 'opacity-0'
          }`}
        >
          <div className="h-full flex items-center justify-between">
            <div className="container-custom w-full flex items-center justify-between">
              {/* Text content */}
              <div className="w-full md:w-1/2 text-white z-10 animate-fadeInUp">
                <h1 className="text-4xl md:text-6xl font-bold mb-4 leading-tight">
                  {slide.title}
                </h1>
                <p className="text-lg md:text-xl mb-8 opacity-90">
                  {slide.subtitle}
                </p>
                <div className="flex gap-4 flex-wrap">
                  <button className="bg-white text-primary-600 px-8 py-4 rounded-md font-semibold hover:bg-gray-100 transition-colors">
                    {t.hero.cta}
                  </button>
                  <button className="border-2 border-white text-white px-8 py-4 rounded-md font-semibold hover:bg-white hover:text-primary-600 transition-colors">
                    Learn More
                  </button>
                </div>
              </div>

              {/* Image placeholder */}
              <div className="hidden md:flex w-1/2 justify-center items-center text-9xl opacity-20">
                {slide.image}
              </div>
            </div>
          </div>
        </div>
      ))}

      {/* Navigation buttons */}
      <button
        onClick={prevSlide}
        className="absolute left-8 top-1/2 transform -translate-y-1/2 z-20 bg-white bg-opacity-50 hover:bg-opacity-75 text-primary-600 p-2 rounded-full transition-all"
        aria-label="Previous slide"
      >
        <FiChevronLeft size={32} />
      </button>
      <button
        onClick={nextSlide}
        className="absolute right-8 top-1/2 transform -translate-y-1/2 z-20 bg-white bg-opacity-50 hover:bg-opacity-75 text-primary-600 p-2 rounded-full transition-all"
        aria-label="Next slide"
      >
        <FiChevronRight size={32} />
      </button>

      {/* Slide indicators */}
      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex gap-3 z-20">
        {slides.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentSlide(index)}
            className={`w-3 h-3 rounded-full transition-all ${
              index === currentSlide ? 'bg-white w-8' : 'bg-white bg-opacity-50'
            }`}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-8 left-8 text-white text-sm animate-bounce hidden md:block">
        Scroll down
      </div>
    </section>
  );
}