Trade tape

import {
  Badge,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  VirtualList,
} from "@paxeer/core";

export interface TapePrint {
  id: string;
  price: number;
  size: number;
  side: "buy" | "sell";
  time: string;
}

export function TradeTape({
  prints = [
    { id: "t1", price: 2480.4, size: 1.2, side: "buy", time: "09:41:02" },
    { id: "t2", price: 2480.1, size: 0.4, side: "sell", time: "09:41:04" },
    { id: "t3", price: 2479.8, size: 3.0, side: "sell", time: "09:41:07" },
    { id: "t4", price: 2480.6, size: 0.8, side: "buy", time: "09:41:11" },
    { id: "t5", price: 2481.0, size: 2.1, side: "buy", time: "09:41:14" },
  ],
}: {
  prints?: TapePrint[];
}) {
  return (
    <Card className="gap-0 py-0 overflow-hidden" data-slot="trade-tape">
      <CardHeader className="border-b border-outline-variant px-3 py-2">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          Trade tape
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        <VirtualList
          label="Recent prints"
          items={prints}
          itemHeight={32}
          height={192}
          empty="Waiting for prints."
          renderItem={(print) => (
            <div className="flex h-8 items-center justify-between px-3 font-[family-name:var(--md-ref-typeface-mono)] text-[length:var(--md-sys-typescale-label-small-size)]">
              <Badge variant={print.side === "buy" ? "default" : "destructive"}>
                {print.side}
              </Badge>
              <span className={print.side === "buy" ? "text-primary" : "text-error"}>
                {print.price.toFixed(2)}
              </span>
              <span className="text-on-surface-variant">{print.size}</span>
              <span className="text-on-surface-variant">{print.time}</span>
            </div>
          )}
        />
      </CardContent>
    </Card>
  );
}