import { Stack, Text, Card, Group, Box } from "@mantine/core";
import { TeamInfo } from "@/features/teams/types";
import TeamAvatar from "@/components/team-avatar";

interface GroupAssignment {
  groupIndex: number;
  groupName: string;
  teams: TeamInfo[];
}

interface GroupPreviewProps {
  groups: GroupAssignment[];
}

const GroupPreview: React.FC<GroupPreviewProps> = ({ groups }) => {
  return (
    <Stack gap="md">
      {groups.map((group) => (
        <Card key={group.groupIndex} withBorder radius="md" p="md" w="fit-content">
          <Stack gap="sm">
            <Group gap="xs" align="center">
              <Text fw={600} size="sm">
                Group {group.groupName}
              </Text>
              <Text size="xs" c="dimmed">
                ({group.teams.length} teams)
              </Text>
            </Group>

            <Stack gap="xs">
              {group.teams.map((team, index) => (
                <Group key={team.id} gap="sm" align="center" wrap="nowrap">
                  <Text size="xs" c="dimmed" w={20} ta="right">
                    {index + 1}
                  </Text>
                  <TeamAvatar team={team} size={24} radius="sm" isRegional />
                  <Text size="sm" truncate style={{ flex: 1 }}>
                    {team.name}
                  </Text>
                </Group>
              ))}
            </Stack>
          </Stack>
        </Card>
      ))}
    </Stack>
  );
};

export default GroupPreview;