import React, { FC } from 'react';
import Marquee from 'react-fast-marquee';
import { GalleryImage, GalleryImageProps } from './GalleryImage';
import { Section } from '../../molecules/Section';
import { GalleryStat, GalleryStatProps } from './GalleryStat';

interface CommunityGalleryProps {
  cards?: (GalleryImageProps | GalleryStatProps)[];
  square?: boolean;
}

const isImageCard = (card: GalleryImageProps): card is GalleryImageProps => 'image' in card;

export const CommunityGallery: FC<CommunityGalleryProps> = ({ cards, square }) => {
  if (!cards || !cards.length) {
    return null;
  }

  return (
    <Section fullWidth noPaddingX>
      <Marquee pauseOnHover speed={50}>
        <div className="tw-grid tw-grid-rows-2 tw-grid-cols-[repeat(auto-fill, 361px)] tw-grid-flow-col-dense tw-gap-4 tw-mx-2">
          {cards.map((card, index) =>
            isImageCard(card) ? (
              <GalleryImage key={card.heading} index={index} square={square} {...card} />
            ) : (
              <GalleryStat key={card.stat} index={index} square={square} {...card} />
            )
          )}
        </div>
      </Marquee>
    </Section>
  );
};
