type ARHudProps = {
  currentTrack: number
  totalTracks: number
  genre: string
  difficulty: number
}

export function ARHud({ currentTrack, totalTracks, genre, difficulty }: ARHudProps) {
  return (
    <div className="ar-hud" aria-hidden="true">
      <span className="ar-hud__corner ar-hud__corner--top-left" />
      <span className="ar-hud__corner ar-hud__corner--top-right" />
      <span className="ar-hud__corner ar-hud__corner--bottom-left" />
      <span className="ar-hud__corner ar-hud__corner--bottom-right" />

      <div className="ar-hud__crosshair" />

      <div className="ar-hud__track-counter">
        {currentTrack} / {totalTracks}
      </div>

      <div className="ar-hud__meta ar-hud__meta--left">{genre}</div>
      <div className="ar-hud__meta ar-hud__meta--right">DIFF {difficulty}</div>
    </div>
  )
}
