import React from 'react'
import { useScale } from '../../context/ScaleContext'
import { useInventoryContext } from '../../context/InventoryContext'

interface AnvilCostProps {
  properties: Record<string, number>
  backgroundWidth: number
}

export function AnvilCost({ properties, backgroundWidth }: AnvilCostProps) {
  const { scale } = useScale()
  const { windowState } = useInventoryContext()

  const cost = properties.repairCost ?? 0
  const hasResult = windowState?.slots.some((s) => s.index === 2 && s.item !== null) ?? false
  if (cost <= 0) return null
  if (!hasResult) return null

  const tooExpensive = cost >= 40
  const label = tooExpensive ? 'Too Expensive!' : `Enchantment Cost: ${cost}`
  const color = tooExpensive ? '#FF6060' : '#80FF20'

  return (
    <div
      style={{
        position: 'absolute',
        right: 8 * scale,
        top: 67 * scale,
        height: 12 * scale,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: `0 ${2 * scale}px`,
        background: 'rgba(0, 0, 0, 0.3)',
        fontSize: 7 * scale,
        fontFamily: "'Minecraftia', 'Minecraft', monospace",
        color,
        whiteSpace: 'nowrap',
        pointerEvents: 'none',
      }}
    >
      {label}
    </div>
  )
}