'use client'

import { usePlayerStore } from '@/stores/playerStore'

export function HUD() {
  const { player } = usePlayerStore()
  if (!player) return null

  const { health, foodLevel, gamemode } = player
  if (gamemode === 'creative') return null

  const hearts = Math.ceil(health / 2)
  const food = Math.ceil(foodLevel / 2)

  return (
    <div className="absolute bottom-10 sm:bottom-14 left-1/2 -translate-x-1/2 z-10 flex items-end gap-6">
      {/* Health */}
      <div className="flex gap-0.5">
        {Array.from({ length: 10 }).map((_, i) => (
          <span key={`h${i}`} className="text-xs sm:text-sm"
            style={{ opacity: i < hearts ? 1 : 0.2, filter: i < hearts ? 'none' : 'grayscale(1)' }}>
            ❤️
          </span>
        ))}
      </div>

      {/* Food */}
      <div className="flex gap-0.5">
        {Array.from({ length: 10 }).map((_, i) => (
          <span key={`f${i}`} className="text-xs sm:text-sm"
            style={{ opacity: i < food ? 1 : 0.2, filter: i < food ? 'none' : 'grayscale(1)' }}>
            🍖
          </span>
        ))}
      </div>
    </div>
  )
}