<script lang="ts">
	let {
		name,
		species,
		img,
		children
	}: { name: string; species?: string; img: string; children?: any } = $props();
</script>

<div class="grow pet">
	<img src={img} alt="" />
	<div class="info">
		<h2>{name}</h2>
		<h3>{species}</h3>
		{#if children}
			{@render children?.()}
		{/if}
	</div>
</div>

<style lang="scss">
	@use '$lib/styles/variables' as vars;
	.pet {
		// margin: 1em;
		border: 1px solid vars.$base-colour;
		display: flex;
		// align-items: center;
		gap: 1em;
		padding: 1em;
		h2 {
			font-size: 3em;
			line-height: 1em;
			padding-top: 0.2em;
		}
		h3 {
			// text-decoration: underline;
			color: vars.$base-colour;
			margin-bottom: 0.2em;
		}
		img {
			width: 200px;
			min-width: 200px;
			height: 200px;
		}
	}

	.grow {
		transition: all 0.2s ease-in-out;
	}

	.grow:hover {
		transform: scale(1.03);
		border: 1px solid vars.$highlight;
	}
</style>
