'use client';

import { ActiveDriverCard } from '@/ui/ActiveDriverCard';
import { mediaConfig } from '@/lib/config/mediaConfig';
import { SectionHeader } from '@/ui/SectionHeader';
import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/Box';
import { Grid } from '@/ui/Grid';
import { Activity } from 'lucide-react';
import React from 'react';

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 marginBottom={10}>
      <SectionHeader
        title="Active Drivers"
        description="Currently competing in leagues"
        variant="minimal"
        actions={<Icon icon={Activity} size={5} intent="success" />}
      />

      <Grid cols={{ base: 2, sm: 3, md: 4, lg: 6 }} gap={3}>
        {activeDrivers.map((driver) => {
          return (
            <ActiveDriverCard
              key={driver.id}
              name={driver.name}
              avatarUrl={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
              categoryLabel={driver.category}
              skillLevelLabel={driver.skillLevel}
              onClick={() => onDriverClick(driver.id)}
            />
          );
        })}
      </Grid>
    </Box>
  );
}