import React from 'react';
import { Carousel as BCarousel, CarouselProps as BootstrapCarouselProps } from 'react-bootstrap';

interface CarouselProps extends BootstrapCarouselProps {
  data: Array<{
    id: string;
    src: string;
    title: string;
    subTitle: string;
  }>;
  maxHeight?: number | string;
  minHeight?: number | string;
}

const Carousel = ({ data, maxHeight, minHeight, ...props }: CarouselProps) => {
  return (
    <BCarousel {...props}>
      {
        data.map(item => (
          <BCarousel.Item style={{ maxHeight, minHeight }} key={item.id}>
            <img
              className="d-block w-100"
              src={item.src}
              alt={item.id}
            />
            <BCarousel.Caption>
              <h3>{item.title}</h3>
              <p>{item.subTitle}</p>
            </BCarousel.Caption>
          </BCarousel.Item>
        ))
      }
    </BCarousel>
  );
};

export default Carousel;
export { Carousel, CarouselProps };