<script lang="ts">
	import type { Res } from './types';

	export let resultats: Res;
</script>

<article>
	<header>Saison {resultats.saison}</header>
	<content>
		<img src={resultats.image} alt="équipe {resultats.saison}" />
		<div>
			{#each resultats.events as event}
				<strong>{event.nom}</strong>
				<ul>
					{#each event.resultats as res}
						<li>{res}</li>
					{/each}
				</ul>
			{/each}
		</div>
	</content>
</article>

<style>
	content {
		display: flex;
		flex-flow: row;
		gap: 30px;
	}

	img {
		object-fit: cover;
		width: 50%;
		height: auto;
	}

	@media (max-width: 640px) {
		img {
			display: none;
		}
	}
</style>
