import { ChevronRight, Globe, Users } from 'lucide-react';
import { ReactNode } from 'react';
import { Badge } from './Badge';
import { Box } from './Box';
import { Card } from './Card';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Text } from './Text';

export interface TeamCardProps {
  name: string;
  description?: string;
  logo?: ReactNode;
  memberCount: number;
  isRecruiting?: boolean;
  badges?: ReactNode;
  region?: string;
  onClick?: () => void;
}

export const TeamCard = ({ 
  name, 
  description, 
  logo, 
  memberCount, 
  isRecruiting, 
  badges,
  region,
  onClick 
}: TeamCardProps) => {
  return (
    <Card 
      variant="dark" 
      onClick={onClick} 
      style={{ cursor: onClick ? 'pointer' : 'default', height: '100%', display: 'flex', flexDirection: 'column' }}
    >
      <Box display="flex" gap={4} marginBottom={4}>
        <Box width={16} height={16} rounded="lg" bg="var(--ui-color-bg-surface-muted)" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden', flexShrink: 0 }}>
          {logo}
        </Box>
        <Box flex={1} minWidth="0">
          <Box display="flex" alignItems="start" justifyContent="between" gap={2}>
            <Heading level={4} weight="bold" truncate>{name}</Heading>
            {isRecruiting && <Badge variant="success" size="sm">RECRUITING</Badge>}
          </Box>
          <Box display="flex" gap={2} flexWrap="wrap" marginTop={2}>
            {badges}
          </Box>
        </Box>
      </Box>

      <Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem', marginBottom: '1rem' }} block leading="relaxed">
        {description || 'No description available'}
      </Text>

      {region && (
        <Box marginBottom={4}>
          <Badge variant="default" size="sm">
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
              <Icon icon={Globe} size={3} intent="primary" />
              <Text size="xs" weight="bold">{region}</Text>
            </div>
          </Badge>
        </Box>
      )}

      <Box marginTop="auto" paddingTop={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between">
        <Box display="flex" alignItems="center" gap={2}>
          <Icon icon={Users} size={3} intent="low" />
          <Text size="xs" variant="low" font="mono">
            {memberCount} {memberCount === 1 ? 'MEMBER' : 'MEMBERS'}
          </Text>
        </Box>
        <Box display="flex" alignItems="center" gap={1}>
          <Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
          <Icon icon={ChevronRight} size={3} intent="low" />
        </Box>
      </Box>
    </Card>
  );
};