import { mediaConfig } from '@/lib/config/mediaConfig';
import { ActiveDriverCard } from '@/components/drivers/ActiveDriverCard';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Activity } from 'lucide-react';

const SKILL_LEVELS = [
  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
];

const CATEGORIES = [
  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
  { id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
  { id: 'sprint', label: 'Sprint', color: 'text-red-400' },
];

interface RecentActivityProps {
  drivers: {
    id: string;
    name: string;
    avatarUrl?: string;
    isActive: boolean;
    skillLevel?: string;
    category?: string;
  }[];
  onDriverClick: (id: string) => void;
}

export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps) {
  const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);

  return (
    <Box mb={10}>
      <Box display="flex" alignItems="center" gap={3} mb={4}>
        <Box 
          display="flex" 
          h="10" 
          w="10" 
          alignItems="center" 
          justifyContent="center" 
          rounded="xl" 
          bg="bg-performance-green/10" 
          border 
          borderColor="border-performance-green/20"
        >
          <Icon icon={Activity} size={5} color="rgb(16, 185, 129)" />
        </Box>
        <Box>
          <Heading level={2}>Active Drivers</Heading>
          <Text size="xs" color="text-gray-500">Currently competing in leagues</Text>
        </Box>
      </Box>

      <Box display="grid" responsiveGridCols={{ base: 2, md: 3, lg: 6 }} gap={3}>
        {activeDrivers.map((driver) => {
          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
          const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
          return (
            <ActiveDriverCard
              key={driver.id}
              name={driver.name}
              avatarUrl={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
              categoryLabel={categoryConfig?.label}
              categoryColor={categoryConfig?.color}
              skillLevelLabel={levelConfig?.label}
              skillLevelColor={levelConfig?.color}
              onClick={() => onDriverClick(driver.id)}
            />
          );
        })}
      </Box>
    </Box>
  );
}