'use client';

import React from 'react';
import { Users, ChevronRight } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';

interface TeamCardProps {
  id: string;
  name: string;
  logoUrl?: string;
  memberCount: number;
  isRecruiting?: boolean;
  onClick?: () => void;
}

export function TeamCard({ name, logoUrl, memberCount, isRecruiting, onClick }: TeamCardProps) {
  return (
    <Box 
      as="article"
      bg="surface-charcoal" 
      border 
      borderColor="outline-steel" 
      p={5} 
      cursor="pointer"
      hover={{ borderColor: 'primary-accent', bg: 'surface-charcoal/80' }}
      transition="smooth"
      onClick={onClick}
      position="relative"
      overflow="hidden"
    >
      {/* Accent line */}
      <Box 
        position="absolute" 
        top="0" 
        left="0" 
        w="1" 
        h="full" 
        bg={isRecruiting ? 'telemetry-aqua' : 'outline-steel'} 
      />

      <Stack direction="row" align="center" gap={4}>
        <Box 
          w="12" 
          h="12" 
          bg="base-black" 
          border 
          borderColor="outline-steel" 
          display="flex" 
          center
          overflow="hidden"
        >
          {logoUrl ? (
            <Image src={logoUrl} alt={name} width={48} height={48} />
          ) : (
            <Text size="xs" weight="bold" color="text-gray-600">{name.substring(0, 2).toUpperCase()}</Text>
          )}
        </Box>

        <Box flex="1">
          <Heading level={4} weight="bold">{name}</Heading>
          <Stack direction="row" align="center" gap={3} mt={1}>
            <Stack direction="row" align="center" gap={1}>
              <Icon icon={Users} size={3} color="text-gray-500" />
              <Text size="xs" color="text-gray-500" font="mono">{memberCount}</Text>
            </Stack>
            {isRecruiting && (
              <Box px={1.5} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
                <Text size="xs" color="telemetry-aqua" weight="bold" uppercase letterSpacing="tighter">Recruiting</Text>
              </Box>
            )}
          </Stack>
        </Box>

        <Icon icon={ChevronRight} size={4} color="text-gray-700" />
      </Stack>
    </Box>
  );
}