'use client';

import { ActionItem } from '@/lib/queries/ActionsPageQuery';
import { ActionStatusBadge } from './ActionStatusBadge';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
import { Text } from '@/ui/Text';

interface ActionListProps {
  actions: ActionItem[];
}

export function ActionList({ actions }: ActionListProps) {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>Timestamp</TableHeader>
          <TableHeader>Type</TableHeader>
          <TableHeader>Initiator</TableHeader>
          <TableHeader>Status</TableHeader>
          <TableHeader>Details</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {actions.map((action) => (
          <TableRow 
            key={action.id} 
            clickable
          >
            <TableCell>
              <Text font="mono" size="xs" variant="low">{action.timestamp}</Text>
            </TableCell>
            <TableCell>
              <Text size="xs" weight="medium" variant="med">{action.type}</Text>
            </TableCell>
            <TableCell>
              <Text size="xs" variant="low">{action.initiator}</Text>
            </TableCell>
            <TableCell>
              <ActionStatusBadge status={action.status} />
            </TableCell>
            <TableCell>
              <Text size="xs" variant="low">
                {action.details}
              </Text>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}