import { Card, Group, Stack, Text, Avatar } from "@mantine/core";
import { PlayerInfo } from "@/features/players/types";
import PlayerAvatar from "@/components/player-avatar";

interface TeamAssignment {
  player1: PlayerInfo;
  player2: PlayerInfo;
  teamName: string;
}

interface TeamAssignmentPreviewProps {
  assignments: TeamAssignment[];
}

const TeamAssignmentPreview: React.FC<TeamAssignmentPreviewProps> = ({ assignments }) => {
  return (
    <Stack gap="sm">
      {assignments.map((assignment, index) => (
        <Card key={index} withBorder radius="md" p="md">
          <Group gap="md" align="center" wrap="nowrap">
            <Text size="sm" fw={600} c="dimmed" w={40}>
              #{index + 1}
            </Text>

            <Group gap="sm" style={{ flex: 1 }} align="center">
              <PlayerAvatar name={`${assignment.player1.first_name} ${assignment.player1.last_name}`} size={32} />
              <Text size="sm" fw={500}>
                {assignment.player1.first_name} {assignment.player1.last_name}
              </Text>
            </Group>

            <Text size="lg" c="dimmed">
              &
            </Text>

            <Group gap="sm" style={{ flex: 1 }} align="center">
              <PlayerAvatar name={`${assignment.player2.first_name} ${assignment.player2.last_name}`} size={32} />
              <Text size="sm" fw={500}>
                {assignment.player2.first_name} {assignment.player2.last_name}
              </Text>
            </Group>
          </Group>
        </Card>
      ))}
    </Stack>
  );
};

export default TeamAssignmentPreview;