

'use client';

import { ActiveDriverCard } from '@/ui/ActiveDriverCard';
import { mediaConfig } from '@/lib/config/mediaConfig';
import { SectionHeader } from '@/ui/SectionHeader';
import { Icon } from '@/ui/Icon';
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 (
    <div style={{ marginBottom: '2.5rem' }}>
      <SectionHeader
        title="Active Drivers"
        description="Currently competing in leagues"
        variant="minimal"
        actions={<Icon icon={Activity} size={5} intent="success" />}
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(10rem, 1fr))', gap: '0.75rem' }}>
        {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)}
            />
          );
        })}
      </div>
    </div>
  );
}
