import { JoinTeamButton } from '@/components/teams/JoinTeamButton';
import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { TeamLogo } from '@/ui/TeamLogo';
import { TeamTag } from '@/ui/TeamTag';
import { Text } from '@/ui/Text';

interface TeamHeroProps {
  team: {
    id: string;
    name: string;
    tag: string | null;
    description?: string;
    category?: string | null;
    createdAt?: string;
    leagues: { id: string }[];
  };
  memberCount: number;
  onUpdate: () => void;
}

export function TeamHero({ team, memberCount, onUpdate }: TeamHeroProps) {
  return (
    <Card>
      <Stack direction="row" align="start" justify="between" wrap gap={6}>
        <Stack direction="row" align="start" gap={6} wrap flexGrow={1}>
          <Box 
            w="24" 
            h="24" 
            rounded="lg" 
            p={1} 
            overflow="hidden" 
            bg="bg-deep-graphite"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <TeamLogo teamId={team.id} alt={team.name} />
          </Box>
          
          <Box flexGrow={1} minWidth="0">
            <Stack direction="row" align="center" gap={3} mb={2}>
              <Heading level={1}>{team.name}</Heading>
              {team.tag && <TeamTag tag={team.tag} />}
            </Stack>

            <Text color="text-gray-300" block mb={4} maxWidth="42rem">{team.description}</Text>

            <Stack direction="row" align="center" gap={4} wrap>
              <Text size="sm" color="text-gray-400">{memberCount} {memberCount === 1 ? 'member' : 'members'}</Text>
              {team.category && (
                <Stack direction="row" align="center" gap={1.5}>
                  <Box w="2" h="2" rounded="full" bg="bg-purple-500" />
                  <Text size="sm" color="text-purple-400">{team.category}</Text>
                </Stack>
              )}
              {team.createdAt && (
                <Text size="sm" color="text-gray-400">
                  Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                </Text>
              )}
              {team.leagues && team.leagues.length > 0 && (
                <Text size="sm" color="text-gray-400">
                  Active in {team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}
                </Text>
              )}
            </Stack>
          </Box>
        </Stack>

        <JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
      </Stack>
    </Card>
  );
}