Footprint

'use client'

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

export interface FootprintPriceLevel {
  price: number
  bidVolume: number
  askVolume: number
}

export interface FootprintCandle {
  time: number
  open: number
  high: number
  low: number
  close: number
  levels: FootprintPriceLevel[]
}

export interface FootprintProps {
  candles: FootprintCandle[]
  mode?: 'numbers' | 'profile'
  priceDecimals?: number
  imbalanceRatio?: number
  showPOC?: boolean
  tickSize?: number
  width?: number
  height?: number
  className?: string
}

// Canvas footprint chart with two modes. 'numbers': each candle is a column of
// price-level rows showing bid (left) vs ask (right) volume, intensity-shaded,
// with diagonal imbalance outlines. 'profile': a divergent volume-profile per
// candle (bid bars left, ask bars right). Both box the per-candle POC.