import React from "react";
import { Carousel } from '@mantine/carousel';
import VideoPlayer from "./VideoPlayer"; // assuming VideoPlayer and ImageViewer are custom components to display videos and photos
import ImageViewer from "./ImageViewer"; // assuming VideoPlayer and ImageViewer are custom components to display videos and photos

type Props = {
  videos: string[];
  photos: string[];
};

const GalleryCarousel: React.FC<Props> = ({ videos, photos }): JSX.Element => {
  return (
    <Carousel
      withIndicators
      height={200}
      slideSize="33.333333%"
      slideGap="md"
      loop
      align="start"    >
      {photos.map((photo, index) => (
        <ImageViewer key={`gallery-photo-${index}`} url={photo} />
        ))}
      {videos.map((video, index) => (
        <VideoPlayer key={`gallery-video-${index}`} url={video} />
      ))}
    </Carousel>
  );
};

export default GalleryCarousel;