Order book

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

export interface BookLevel {
  price: number;
  size: number;
}

export function OrderBook({
  bids = [
    { price: 2480.1, size: 4.2 },
    { price: 2479.8, size: 1.1 },
    { price: 2478.4, size: 6.0 },
  ],
  asks = [
    { price: 2480.6, size: 2.4 },
    { price: 2481.2, size: 3.8 },
    { price: 2482.0, size: 1.5 },
  ],
}: {
  bids?: BookLevel[];
  asks?: BookLevel[];
}) {
  return (
    <Card className="gap-0 py-0 overflow-hidden" data-slot="order-book">
      <CardHeader className="border-b border-outline-variant px-3 py-2">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          Order book
        </CardTitle>
      </CardHeader>
      <CardContent className="grid grid-cols-2 gap-0 p-0">
        <LevelTable title="Bids" tone="buy" levels={bids} />
        <LevelTable title="Asks" tone="sell" levels={asks} />
      </CardContent>
    </Card>
  );
}

function LevelTable({
  title,
  tone,
  levels,
}: {
  title: string;
  tone: "buy" | "sell";
  levels: BookLevel[];
}) {
  const priceClass = tone === "buy" ? "text-primary" : "text-error";
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>{title}</TableHead>
          <TableHead>Size</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {levels.map((level) => (
          <TableRow key={`${title}-${level.price}`}>
            <TableCell className={`font-[family-name:var(--md-ref-typeface-mono)] ${priceClass}`}>
              {level.price.toFixed(2)}
            </TableCell>
            <TableCell className="text-on-surface-variant">{level.size}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}