Candlestick Chart

// Define candle data (OHLC)
const candles = [
  { open: 45, close: 60, high: 70, low: 40 }, // green (bullish)
  { open: 60, close: 50, high: 65, low: 45 }, // red (bearish)
  { open: 50, close: 65, high: 75, low: 48 }, // green
]

// Render candlesticks
{candles.map((candle, i) => {
  const isGreen = candle.close > candle.open
  const bodyTop = Math.max(candle.open, candle.close)
  const bodyBottom = Math.min(candle.open, candle.close)
  const bodyHeight = bodyTop - bodyBottom
  const wickTop = candle.high - bodyTop
  const wickBottom = bodyBottom - candle.low

  return (
    <div key={i} className="flex flex-col items-center">
      {/* Upper wick */}
      <div style={{ height: `${wickTop}%`, backgroundColor: isGreen ? 'green' : 'red' }} />
      {/* Body */}
      <div style={{ height: `${bodyHeight}%`, backgroundColor: isGreen ? 'green' : 'red' }} />
      {/* Lower wick */}
      <div style={{ height: `${wickBottom}%`, backgroundColor: isGreen ? 'green' : 'red' }} />
    </div>
  )
})}