gridpilot.gg/apps/website/components/dashboard/RecentActivityTable.tsx

'use client';

import React from 'react';
import { useRouter } from 'next/navigation';
import { routes } from '@/lib/routing/RouteConfig';
import { Text } from '@/ui/Text';
import { StatusDot } from '@/ui/StatusDot';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';

export interface ActivityItem {
  id: string;
  type: string;
  description: string;
  timestamp: string;
  status?: 'success' | 'warning' | 'critical' | 'info';
}

interface RecentActivityTableProps {
  items: ActivityItem[];
}

/**
 * RecentActivityTable
 * 
 * A high-density table for displaying recent events and telemetry logs.
 */
export function RecentActivityTable({ items }: RecentActivityTableProps) {
  const router = useRouter();
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>
            <Text size="xs" weight="bold" uppercase variant="low">Type</Text>
          </TableHeader>
          <TableHeader>
            <Text size="xs" weight="bold" uppercase variant="low">Description</Text>
          </TableHeader>
          <TableHeader>
            <Text size="xs" weight="bold" uppercase variant="low">Time</Text>
          </TableHeader>
          <TableHeader>
            <Text size="xs" weight="bold" uppercase variant="low">Status</Text>
          </TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {items.map((item) => (
          <TableRow
            key={item.id}
            data-testid={`activity-item-${item.id}`}
            cursor="pointer"
            onClick={() => router.push(routes.race.results(item.id))}
          >
            <TableCell data-testid="activity-race-result-link">
              <Text font="mono" variant="telemetry" size="xs">{item.type}</Text>
            </TableCell>
            <TableCell>
              <Text variant="med" size="xs">{item.description}</Text>
            </TableCell>
            <TableCell>
              <Text variant="low" size="xs">{item.timestamp}</Text>
            </TableCell>
            <TableCell>
              <StatusDot intent={item.status === 'info' ? 'primary' : item.status} size="sm" />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}