import { Stack } from '../../types'
import '../../scss/fund-bar.scss'

type Props = {
  col: number
  stack: Stack
}

export const FundBar = ({ stack, col }: Props) => {
  const amount = 0

  const max = stack.amount
  const current = max - amount
  const percent = Math.max(current / max, 0)
  const hue = percent * 120

  return (
    <>
      <div
        className={`fundbar back col${col}`}
        onClick={() => console.log(`adding transaction to => ${stack.name}`)}
      ></div>
      <div
        className={`fundbar front col${col}`}
        style={{
          background: `hsl(${hue}, 100%, 50%)`,
          height: `${percent * 40 + 10}vmin`,
        }}
      >
        <h3>{stack.name}</h3>
      </div>
      <div
        className={`fundbar totals col${col}`}
        style={{ color: `hsl(0, 0%, ${Math.abs(1 - percent) * 100}%)` }}
      >
        ${Math.floor(current)} / ${max}
      </div>
    </>
  )
}