// components/SimpleCarousel.jsx
import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const SimpleCarousel = () => {
  const brands = [
    "Caterpillar", "Komatsu", "Cummins", "Hitachi", "Liebherr",
    "Shantui", "Shacman", "Shaanxi", "Howo", "Volvo",
    "John Deere", "Atlas Copco/Epiroc"
  ];

  const [current, setCurrent] = useState(0);

  const next = () => {
    setCurrent(current === brands.length - 1 ? 0 : current + 1);
  };

  const prev = () => {
    setCurrent(current === 0 ? brands.length - 1 : current - 1);
  };

  useEffect(() => {
    const timer = setInterval(next, 3000);
    return () => clearInterval(timer);
  }, [current]);

  return (
    <div className="w-full bg-[#232323] py-16">
      <div className="max-w-4xl mx-auto px-4">
        <div className="relative flex items-center justify-center">
          <button 
            onClick={prev}
            className="absolute left-0 text-white p-2 hover:bg-white/10 rounded-full"
          >
            <ChevronLeft size={24} />
          </button>

          <div className="text-center px-12">
            <h3 className="text-white text-3xl font-bold transition-all duration-500">
              {brands[current]}
            </h3>
          </div>

          <button 
            onClick={next}
            className="absolute right-0 text-white p-2 hover:bg-white/10 rounded-full"
          >
            <ChevronRight size={24} />
          </button>
        </div>
      </div>
    </div>
  );
};

export default SimpleCarousel;