import { Flex, Text } from '@mantine/core';
import React from 'react';
import { MatchCard } from './match-card';
import { Match } from '../types';

interface BracketRoundProps {
  matches: Match[];
  roundIndex: number;
  getParentMatchOrder: (parentLid: number) => number | string;
  onAnnounce?: (teamOne: any, teamTwo: any) => void;
}

export const BracketRound: React.FC<BracketRoundProps> = ({
  matches,
  roundIndex,
  getParentMatchOrder,
  onAnnounce,
}) => {
  const isBye = (type: string) => type?.toLowerCase() === 'bye';

  return (
    <Flex direction="column" key={roundIndex} gap={24} justify="space-around">
      {matches.map((match, matchIndex) => {
        if (!match) return null;
        if (isBye(match.type)) return <></>; // for spacing
        
        return (
          <Flex
            direction="row"
            key={matchIndex}
            align="center"
            justify="end"
            gap={8}
          >
            <Text c="dimmed" fw="bolder">
              {match.order}
            </Text>
            <MatchCard
              match={match}
              getParentMatchOrder={getParentMatchOrder}
              onAnnounce={onAnnounce}
            />
          </Flex>
        );
      })}
    </Flex>
  );
};