import { Flex, Text, Select, Card } from "@mantine/core";

interface Team {
  id: string;
  name: string;
}

interface SeedListProps {
  teams: Team[];
  onSeedChange: (currentIndex: number, newIndex: number) => void;
}

export function SeedList({ teams, onSeedChange }: SeedListProps) {
  const seedOptions = teams.map((_, index) => ({
    value: index.toString(),
    label: `Seed ${index + 1}`,
  }));

  return (
    <Flex direction="column" gap={8}>
      {teams.map((team, index) => (
        <Card key={team.id} withBorder p="xs">
          <Flex align="center" gap="xs" justify="space-between">
            <Flex align="center" gap="xs">
              <Select
                value={index.toString()}
                data={seedOptions}
                onChange={(value) => {
                  if (value !== null) {
                    const newIndex = parseInt(value);
                    if (newIndex !== index) {
                      onSeedChange(index, newIndex);
                    }
                  }
                }}
                size="xs"
                w={100}
              />
              <Text size="sm" fw={500}>
                {team.name}
              </Text>
            </Flex>
          </Flex>
        </Card>
      ))}
    </Flex>
  );
}