import {
  formatDigits,
  formatPrice,
  Orderbook,
  OrderbookControls,
  OrderbookTable,
} from '@krono/kit';

export function OrderbookPanel() {
  return (
      <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
        <Orderbook.Panel
          renderTable={(props) => (
            <OrderbookTable.Root
              columns={{
                total: {
                  label: 'Total',
                  children: ({ value }) => formatDigits(value.total),
                },
                quantity: {
                  label: 'Quantity',
                  children: ({ value }) => formatDigits(value.quantity),
                },
                price: {
                  label: 'Price',
                  className: 'font-semibold',
                  children: ({ value }) => formatPrice(value.price, 4),
                },
              }}
              {...props}
            />
          )}
        >
          <OrderbookControls.Root>
            <OrderbookControls.LiveBadge />
            <OrderbookControls.Toolbar>
              <OrderbookControls.PlaybackButtons />
              <OrderbookControls.Timeline />
            </OrderbookControls.Toolbar>
          </OrderbookControls.Root>
        </Orderbook.Panel>
    </Orderbook.Root>
  );
}