import { useState } from 'react';

function FeatureCard({ title, description, image }) {
  return (
    <div 
      className="flex flex-col justify-center items-center h-full text-white p-8 bg-opacity-50 relative"
      style={{ backgroundImage: `url(${image})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
    >
      <div className="absolute inset-0 bg-black opacity-50"></div>
      <h2 className="text-4xl mb-4 z-10">{title}</h2>
      <p className="text-xl z-10">{description}</p>
    </div>
  );
}

function ImageSlideshow({ slides, headerText }) {
  const [currentSlide, setCurrentSlide] = useState(0);

  return (
    <div className="h-screen bg-gray-800 overflow-hidden">
      <header className="absolute top-8 left-1/2 transform -translate-x-1/2 z-10">
        <h1 className="text-5xl text-white">{headerText}</h1>
      </header>
      <main className="h-full w-full relative">
        {slides.map((slide, index) => (
          <div 
            key={index} 
            className={`absolute h-full w-full transition-transform duration-1000 ease-in-out transform ${index !== currentSlide && 'translate-x-full'}`}
          >
            <FeatureCard {...slide} />
          </div>
        ))}
      </main>
      <footer className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 flex space-x-4">
        {slides.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentSlide(index)}
            className={`w-4 h-4 ${index === currentSlide ? 'bg-blue-500' : 'bg-white' } rounded-full`}
          />
        ))}
      </footer>
    </div>
  );
}

export default ImageSlideshow;