Task queue

import {
  Badge,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@paxeer/core";

export interface QueueTask {
  id: string;
  title: string;
  state: "queued" | "running" | "done";
  owner: string;
}

export function TaskQueue({
  tasks = [
    { id: "q1", title: "Refresh ETH book", state: "done", owner: "atlas-research" },
    { id: "q2", title: "Draft limit bid", state: "running", owner: "helix-exec" },
    { id: "q3", title: "Risk review", state: "queued", owner: "sentry-risk" },
  ],
}: {
  tasks?: QueueTask[];
}) {
  return (
    <Card className="gap-0 py-0 overflow-hidden" data-slot="task-queue">
      <CardHeader className="border-b border-outline-variant px-3 py-2">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          Task queue
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        {tasks.length === 0 ? (
          <Empty className="p-6">
            <EmptyHeader>
              <EmptyTitle>Queue is empty</EmptyTitle>
              <EmptyDescription>New agent tasks will enqueue here.</EmptyDescription>
            </EmptyHeader>
          </Empty>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>#</TableHead>
                <TableHead>Task</TableHead>
                <TableHead>Owner</TableHead>
                <TableHead>State</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {tasks.map((task, index) => (
                <TableRow key={task.id}>
                  <TableCell className="text-on-surface-variant">{index + 1}</TableCell>
                  <TableCell>{task.title}</TableCell>
                  <TableCell className="font-[family-name:var(--md-ref-typeface-mono)]">
                    {task.owner}
                  </TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        task.state === "running"
                          ? "default"
                          : task.state === "done"
                            ? "secondary"
                            : "tertiary"
                      }
                    >
                      {task.state}
                    </Badge>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </CardContent>
    </Card>
  );
}