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

interface MatchListProps {
  matches: Match[];
  hideH2H?: boolean;
}

const MatchList = ({ matches, hideH2H = false }: MatchListProps) => {
  const filteredMatches = matches?.filter(match =>
    match.home && match.away && !match.bye && match.status != "tbd"
  ).sort((a, b) => a.start_time < b.start_time ? 1 : -1) || [];

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

  const isRegional = filteredMatches[0]?.tournament?.regional;

  return (
    <Stack p="md" gap="sm">
      {isRegional && (
        <Text size="xs" c="dimmed" ta="center" px="md">
          Matches for regionals are unordered
        </Text>
      )}
      {filteredMatches.map((match, index) => (
        <div
          key={`match-${match.id}-${index}`}
        >
          <MatchCard match={match} hideH2H={hideH2H} />
        </div>
      ))}
    </Stack>
  );
};

export default MatchList;