'use client';

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

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

export function TeamHero({ team, memberCount, memberCountLabel, leagueCountLabel, onUpdate }: TeamHeroProps) {
  return (
    <Card>
      <Group align="start" justify="between" wrap gap={6}>
        <Group align="start" gap={6} wrap fullWidth>
          <TeamLogo teamId={team.id} alt={team.name} size={96} />
          
          <Group direction="col" align="start" gap={2} fullWidth>
            <Group gap={3}>
              <Heading level={1}>{team.name}</Heading>
              {team.tag && <TeamTag tag={team.tag} />}
            </Group>

            <Text variant="low" block marginBottom={4}>{team.description}</Text>

            <StatGrid
              columns={{ base: 2, md: 4 }}
              variant="box"
              stats={[
                {
                  label: 'Personnel',
                  value: memberCountLabel || 'Unknown',
                },
                ...(team.category ? [{
                  label: 'Category',
                  value: team.category,
                  intent: 'primary' as const,
                }] : []),
                ...(team.foundedDateLabel ? [{
                  label: 'Founded',
                  value: team.foundedDateLabel,
                }] : []),
                ...(team.leagues && team.leagues.length > 0 ? [{
                  label: 'Activity',
                  value: leagueCountLabel || 'Unknown',
                }] : []),
              ]}
            />
          </Group>
        </Group>

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