<script lang="ts">
	import type { Photo } from '$lib/types';

	interface Props {
		photo: Photo;
		revealed?: boolean;
	}

	let { photo, revealed = false }: Props = $props();
</script>

<figure class="photo-panel">
	<img src={photo.url} alt={photo.alt} loading="lazy" decoding="async" />
	{#if revealed}
		<figcaption>{photo.credit}</figcaption>
	{/if}
</figure>

<style>
	.photo-panel {
		position: relative;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: var(--oki-vert);
		border-radius: var(--oki-radius);
	}

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

	figcaption {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0.4rem 0.8rem;
		font-size: 0.72rem;
		color: #fff;
		background: linear-gradient(transparent, rgba(11, 61, 46, 0.85));
	}
</style>
