import {
  Paper,
  Text,
  Group,
  Box,
  Title
} from "@mantine/core";
import { useTeam } from "../queries";
import TeamAvatar from "@/components/team-avatar";

interface RegionalTeamCardProps {
  teamId: string;
}

const RegionalTeamCard = ({ teamId }: RegionalTeamCardProps) => {
  const { data: team, error } = useTeam(teamId);

  if (error || !team) {
    return (
      <Paper p="sm" withBorder radius="md">
        <Text c="red" ta="center" size="sm">
          Failed to load team
        </Text>
      </Paper>
    );
  }

  return (
    <Paper
      withBorder
      radius="lg"
      shadow="xs"
      p="xs"
    >
      <Group gap="md" align="center">
        <TeamAvatar
          team={team}
          size={40}
          radius="md"
          isRegional={true}
          style={{
            backgroundColor: team.primary_color || undefined,
            color: team.accent_color || undefined,
          }}
        />
        <Box style={{ flex: 1, minWidth: 0 }}>
          <Title order={5} lineClamp={1}>
            {team.name}
          </Title>
          <Text size="sm" c="dimmed" lineClamp={1}>
            {team.players?.map(p => `${p.first_name} ${p.last_name}`).join(', ')}
          </Text>
        </Box>
      </Group>
    </Paper>
  );
};

export default RegionalTeamCard;