import { Stack } from "@mantine/core";
import { Match } from "../types";
import MatchCard from "./match-card";

interface MatchListProps {
  matches: Match[];
}

const MatchList = ({ matches }: MatchListProps) => {
  const filteredMatches = matches?.filter(match =>
    match.home && match.away && !match.bye && match.status != "tbd"
  ) || [];

  if (!filteredMatches.length) {
    return undefined;
  }

  return (
    <Stack p="md" gap="sm">
      {filteredMatches.map((match, index) => (
        <div
          key={`match-${match.id}-${index}`}
        >
          <MatchCard match={match} />
        </div>
      ))}
    </Stack>
  );
};

export default MatchList;