/**
 * @Move (SQPD)
 * Only used by the Forms module - move to Forms/
 */
import Carousel from 'react-material-ui-carousel';

import { Attachment } from 'src/types/attachments';

import Media from './Media';

export type Props = {
  mediaList: Attachment[];
  className?: string;
};

export const MediaCarousel = ({ mediaList, className }: Props) => (
  <Carousel
    autoPlay={false}
    indicators={mediaList.length > 1}
    navButtonsAlwaysVisible
    navButtonsAlwaysInvisible={mediaList.length === 1}
    fullHeightHover={false}
    cycleNavigation={false}
    className={className}
  >
    {mediaList.map(media => (
      <Media
        key={media.url}
        media={media}
      />
    ))}
  </Carousel>
);

export default MediaCarousel;