import { Box } from "@mantine/core";
import { Carousel } from "@mantine/carousel";
import MatchCard from "@/features/matches/components/match-card";
import { Match } from "@/features/matches/types";
import carouselClasses from "../carousel.module.css";

interface MatchCarouselProps {
  matches: Match[];
}

const MatchCarousel = ({ matches }: MatchCarouselProps) => {
  if (matches.length === 1) {
    return (
      <Box px="md">
        <MatchCard match={matches[0]} />
      </Box>
    );
  }

  return (
    <Carousel
      slideSize="90%"
      slideGap="xs"
      withControls={false}
      withIndicators={matches.length > 1}
      classNames={{
        indicators: carouselClasses.indicators,
        indicator: carouselClasses.indicator,
      }}
    >
      {matches.map((match, index) => (
        <Carousel.Slide key={match.id}>
          <Box
            pl={index === 0 ? "md" : undefined}
            pr={index === matches.length - 1 ? "md" : undefined}
          >
            <MatchCard match={match} />
          </Box>
        </Carousel.Slide>
      ))}
    </Carousel>
  );
};

export default MatchCarousel;
