function showProductPage(product) {
	sessionStorage.setItem('selectedProduct', JSON.stringify(product))
	window.location.href = 'detail.html'
}

function openProductPage(packJson) {
	const packInfo = JSON.parse(packJson)
	console.log(packInfo)
	const product = products.find((product) => product.productId === packInfo.packId)
	if (!product) {
		console.error('Product not found for packId:', packInfo.packId)
		return
	}
	showProductPage(product)
}

document.addEventListener('DOMContentLoaded', () => {
	const productsContainer = document.querySelector('.products')
	products.forEach((product) => {
		const productElement = document.createElement('div')
		productElement.classList.add('product')
		productElement.setAttribute('data-product-id', product.productId)
		productElement.innerHTML = `
			<div class="image-container">
			  <img src="${getImagePath(product)}" alt="Product Image" />
			  <div class="play-button-container" onclick="togglePlayPause(this, '${getAudioDemoPath(
					product
				)}')">
				<div class="play-button"></div>
			  </div>
			</div>
			<div class="product-title">${product.name}</div>
			<div class="product-genre">${product.genre}</div>
		  `
		productsContainer.appendChild(productElement)
		productElement.querySelector('.image-container').addEventListener('click', (event) => {
			if (!event.target.closest('.play-button-container')) {
				showProductPage(product)
			}
		})

		getPackOwnership(product.productId)
	})
})
