'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;
    leagues: { id: string }[];
  };
  memberCount: number;
  onUpdate: () => void;
}

export function TeamHero({ team, memberCount, 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: `${memberCount} ${memberCount === 1 ? 'member' : 'members'}`,
                },
                ...(team.category ? [{
                  label: 'Category',
                  value: team.category,
                  intent: 'primary' as const,
                }] : []),
                ...(team.createdAt ? [{
                  label: 'Founded',
                  value: new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' }),
                }] : []),
                ...(team.leagues && team.leagues.length > 0 ? [{
                  label: 'Activity',
                  value: `${team.leagues.length} ${team.leagues.length === 1 ? 'league' : 'leagues'}`,
                }] : []),
              ]}
            />
          </Group>
        </Group>

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