<script lang="ts">
	export let src: string;
	export let alt = '';
	const u = new URL(src);
	const filename = u.pathname.split('/').pop() || '9a8sda';
	const int = (parseInt(filename?.slice(0, 8), 16) % 7) + 1;
</script>

<div class="frame" style="--frame: url(/frames/frame_0{int}.png)">
	<img src="/hang.png" class="hang" />
	<picture>
		<source srcset={src.replace('.png', '.jpg')} type="image/jpeg" />
		<img {src} alt={src} />
	</picture>
</div>

<style>
	.hang {
		position: absolute;
		top: 0px;
		margin: 0px;
		top: -16%;
		width: 50%;
		left: 25%;
		z-index: -1;
	}
	.frame {
		position: relative;
		width: fit-content;
		height: fit-content;
	}
	.frame:before {
		content: '';
		position: absolute;
		height: 100%;
		width: 100%;
		background: var(--frame);
		background-position: center center;
		background-size: contain;
		background-repeat: no-repeat;
		filter: drop-shadow(0px 0px 20px black);
	}
	img {
		z-index: -1;
		max-width: 70%;
		max-height: 70%;
		margin-left: 15%;
		margin-top: 12%;
	}
</style>
