import Image from 'next/image';
import React from 'react';

export interface CarouselProps {
  id?: string;
  images?: {
    src: string;
    alt?: string;
  }[];
}

export default function Carousel({ id="carousel-banners-eventos", images }: CarouselProps) {  
  if (!images || images.length === 0) {
    return <div></div>;
  }

  return (
    <div id={id} className="carousel slide" data-bs-ride="carousel">
      <div className="carousel-inner">
        {images.map((img, index) => (
          <div
            key={index}
            className={`carousel-item ${index === 0 ? 'active' : ''}`}
          >
            <Image
              src={img.src ? img.src : '/default-banner.png'}
              width={1200}
              height={400}
              alt="Ejemplo de banner"
              className="d-block w-100 rounded-3 img-fluid"
              style={{
                height: '400px',
                objectFit: 'cover',
                objectPosition: 'center',
                maxHeight: '400px',
              }}
            />
          </div>
        ))}
      </div>

      {images.length > 1 && (
        <>
          <button
            className="carousel-control-prev"
            type="button"
            data-bs-target={`#${id}`}
            data-bs-slide="prev"
          >
            <span
              className="carousel-control-prev-icon"
              aria-hidden="true"
            ></span>
            <span className="visually-hidden">Anterior</span>
          </button>
          <button
            className="carousel-control-next"
            type="button"
            data-bs-target={`#${id}`}
            data-bs-slide="next"
          >
            <span
              className="carousel-control-next-icon"
              aria-hidden="true"
            ></span>
            <span className="visually-hidden">Siguiente</span>
          </button>
        </>
      )}
    </div>
  );
}