gridpilot.gg/apps/website/components/teams/TeamCard.tsx

'use client';

import React from 'react';
import { ChevronRight, Users, Zap } from 'lucide-react';
import { Card } from '@/ui/Card';
import { CountryFlag } from '@/ui/CountryFlag';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Logo } from '@/ui/Logo';
import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Box } from '@/ui/Box';
import { TeamSummaryData } from '@/lib/view-data/TeamsViewData';

interface TeamCardProps {
  team?: TeamSummaryData;
  // Compatibility props
  name?: string;
  logo?: string;
  memberCount?: number;
  ratingLabel?: string;
  winsLabel?: string;
  racesLabel?: string;
  region?: string;
  isRecruiting?: boolean;
  performanceLevel?: string;
  description?: string;
  onClick?: (id: string) => void;
}

export function TeamCard({ 
  team, 
  name,
  logo,
  memberCount,
  ratingLabel,
  winsLabel,
  racesLabel,
  region,
  isRecruiting,
  performanceLevel,
  description,
  onClick 
}: TeamCardProps) {
  const data = team || {
    teamId: '',
    teamName: name || '',
    memberCount: memberCount || 0,
    logoUrl: logo,
    ratingLabel: ratingLabel || '-',
    winsLabel: winsLabel || '-',
    racesLabel: racesLabel || '-',
    region: region,
    isRecruiting: isRecruiting || false,
    performanceLevel: performanceLevel,
    description: description,
    countryCode: region,
  };

  return (
    <Card 
      variant="precision" 
      padding="none" 
      onClick={() => onClick?.(data.teamId)}
      transition
      fullHeight
      position="relative"
    >
      {data.isRecruiting && (
        <Box position="absolute" top={0} right={0} zIndex={10}>
          <Badge variant="success" size="xs" rounded="none" style={{ borderBottomLeftRadius: '4px' }}>
            RECRUITING
          </Badge>
        </Box>
      )}
      
      <Stack padding={6} gap={6} fullHeight>
        {/* Header: Logo and Identity */}
        <Stack direction="row" align="start" gap={4}>
          <Logo 
            src={data.logoUrl} 
            alt={data.teamName} 
            size={40} 
            rounded="sm" 
            variant="dark"
            icon={Users}
          />
          <Stack flex={1} gap={1} paddingTop={1}>
            <Heading level={5} weight="bold" uppercase style={{ lineHeight: '1.2' }}>
              {data.teamName}
            </Heading>
            <Stack direction="row" gap={3} wrap>
              {data.performanceLevel && (
                <Stack direction="row" align="center" gap={1}>
                  <Icon icon={Zap} size={3} intent="telemetry" />
                  <Text size="xs" variant="telemetry" mono uppercase>{data.performanceLevel}</Text>
                </Stack>
              )}
            </Stack>
          </Stack>
        </Stack>

        {/* Technical Stats Grid - Engineered Look */}
        <Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)' }}>
          <Stack padding={3} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
            <Text size="xs" variant="low" uppercase block mono>Rating</Text>
            <Text size="md" weight="bold" mono variant="primary">{data.ratingLabel}</Text>
          </Stack>
          <Stack padding={3} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
            <Text size="xs" variant="low" uppercase block mono>Wins</Text>
            <Text size="md" weight="bold" mono variant="telemetry">{data.winsLabel}</Text>
          </Stack>
          <Stack padding={3} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
            <Text size="xs" variant="low" uppercase block mono>Races</Text>
            <Text size="md" weight="bold" mono variant="high">{data.racesLabel}</Text>
          </Stack>
        </Grid>

        {data.description && (
          <Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
            {data.description}
          </Text>
        )}

        {/* Spacer to push footer down */}
        <Box flex={1} />

        {/* Footer: Metadata */}
        <Stack direction="row" justify="between" paddingTop={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
          <Stack direction="row" gap={4}>
            <Stack direction="row" align="center" gap={1.5}>
              <Icon icon={Users} size={3} intent="low" />
              <Text size="xs" variant="low" mono>{data.memberCount}</Text>
            </Stack>
            {data.countryCode && (
              <Stack direction="row" align="center" gap={1.5}>
                <CountryFlag countryCode={data.countryCode} size="sm" />
                <Text size="xs" variant="low" mono uppercase>{data.countryCode}</Text>
              </Stack>
            )}
          </Stack>
          
          <Stack direction="row" align="center" gap={1} style={{ color: 'var(--ui-color-intent-primary)' }}>
            <Text size="xs" weight="bold" uppercase mono>Details</Text>
            <Icon icon={ChevronRight} size={3} />
          </Stack>
        </Stack>
      </Stack>
    </Card>
  );
}