import * as THREE from 'three'

const scene = new THREE.Scene()
scene.background = new THREE.Color('#111111')

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 5

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const geometry = new THREE.BoxGeometry(2, 2, 2)
const material = new THREE.MeshBasicMaterial({ color: 'orange' })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
let isHovered = false 

window.addEventListener('mousemove', (e) => {
  mouse.x = (e.clientX / window.innerWidth) * 2 - 1
  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1

  raycaster.setFromCamera(mouse, camera)
  const hits = raycaster.intersectObject(cube)

  if (hits.length > 0) {
    if (!isHovered) {
      isHovered = true
      cube.material.color.set('hotpink')
      cube.scale.set(1.15, 1.15, 1.15)
      document.body.style.cursor = 'pointer'
    }
  } else {
    if (isHovered) {
      isHovered = false
      cube.material.color.set('orange')
      cube.scale.set(1, 1, 1)
      document.body.style.cursor = 'default'
    }
  }
})

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

function animate() {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
}

animate()