import React, { useEffect, useState } from 'react';

const BentoSlideshow = ({ slides, style = {} }) => {
  const [current, setCurrent] = useState(0);

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

  return (
    <div
      className="bento-card slideshow-card"
      style={style}
      role="region"
      aria-label="Wyróżnione artykuły"
      aria-roledescription="karuzela"
    >
      {slides.map((slide, index) => (
        <div
          key={index}
          className="bento-bg"
          style={{ backgroundImage: `url(${slide.bgImage})` }}
          role="img"
          aria-label={slide.title}
          aria-hidden={index !== current}
          data-active={index === current}
        />
      ))}

      <div className="bento-overlay" aria-hidden="true" />

      <div className="slideshow-content">
        {slides.map((slide, index) => (
          <div
            key={index}
            className={`slideshow-slide${index === current ? ' slideshow-slide--active' : ''}`}
            aria-hidden={index !== current}
          >
            <div className={`bento-badge badge-${slide.type}`}>{slide.badge}</div>
            <h2 className="article-title slideshow-title">{slide.title}</h2>
            <div className="article-meta">
              <span>{slide.category}</span>
              <span className="dot" aria-hidden="true" />
              <span>{slide.readTime}</span>
            </div>
          </div>
        ))}

        <div className="slideshow-dots" role="tablist" aria-label="Slajdy">
          {slides.map((slide, index) => (
            <button
              key={index}
              role="tab"
              aria-selected={index === current}
              aria-label={`Slajd ${index + 1}: ${slide.title}`}
              className={`slideshow-dot${index === current ? ' slideshow-dot--active' : ''}`}
              onClick={(e) => { e.stopPropagation(); setCurrent(index); }}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default BentoSlideshow;
