Heatmap

'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface HeatmapLevel {
  price: number
  size: number
  side?: 'bid' | 'ask' // else derived from the slice mid
}

export interface HeatmapSlice {
  time: number
  mid?: number // splits bids (below) from asks (above)
  levels: HeatmapLevel[]
}

export interface HeatmapTrade {
  time: number
  price: number
  size: number
  side: 'buy' | 'sell'
}

export interface HeatmapProps {
  slices: HeatmapSlice[]
  trades?: HeatmapTrade[]
  priceDecimals?: number
  tickSize?: number
  colorScale?: 'side' | 'heat' | 'mono'
  showTrades?: boolean
  showDepth?: boolean
  className?: string
}

// Canvas time×price depth heatmap. Resting liquidity is colored by side — red
// asks above the mid, green bids below — with brightness tracking size, so big
// resting orders read as bright "walls". A mid-price path connects the slices,
// trades overlay as side-colored dots sized by volume, and the live book is
// drawn as a depth histogram at the right edge.