---
import { Image } from "astro:assets";
import type { ImageMetadata } from "astro";

interface Props {
	images: (ImageMetadata | string)[];
	alts: string[];
}

const { images, alts } = Astro.props;
---

<div class="image-collage">
	<div class="collage-grid">
		{images.map((img, index) => (
			<div class="collage-item" data-index={index}>
				{typeof img === "string" ? (
					<img src={img} alt={alts[index]} loading="lazy" />
				) : (
					<Image src={img} alt={alts[index]} loading="lazy" />
				)}
			</div>
		))}
	</div>
	<div class="collage-overlay" id="collage-overlay">
		<img src="" alt="Expanded image preview" id="expanded-image" />
	</div>
</div>

<style>
	.image-collage {
		position: relative;
		width: 100%;
	}

	.collage-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 0.5rem;
		width: 100%;
	}

	.collage-item {
		position: relative;
		overflow: hidden;
		cursor: pointer;
		aspect-ratio: 1;
		transition: transform 0.2s ease;
	}

	.collage-item:hover {
		transform: scale(1.02);
	}

	.collage-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.collage-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100dvh;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s ease;
		z-index: 9999;
	}

	.collage-overlay.active {
		background-color: rgba(0, 0, 0, 0.9);
		opacity: 1;
		pointer-events: all;
	}

	.collage-overlay img {
		max-width: 90%;
		max-height: 90vh;
		object-fit: contain;
		transform: scale(0.8);
		transition: transform 0.3s ease;
	}

	.collage-overlay.active img {
		transform: scale(1);
	}

	@media (max-width: 768px) {
		.collage-item {
			cursor: default;
		}

		.collage-item:hover {
			transform: none;
		}
	}
</style>

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const isMobile = () => window.innerWidth <= 768;

		const collageItems = document.querySelectorAll('.collage-item');
		const overlay = document.getElementById('collage-overlay');
		const expandedImage = document.getElementById('expanded-image') as HTMLImageElement;

		collageItems.forEach((item) => {
			item.addEventListener('click', () => {
				if (isMobile()) return;

				const img = item.querySelector('img') as HTMLImageElement;
				if (img && overlay && expandedImage) {
					expandedImage.src = img.src;
					expandedImage.alt = img.alt;
					overlay.classList.add('active');
				}
			});
		});

		overlay?.addEventListener('click', () => {
			overlay.classList.remove('active');
			setTimeout(() => {
				if (expandedImage) {
					expandedImage.src = '';
				}
			}, 300);
		});
	});
</script>