<script lang="ts">
	import Window from '$lib/components/window.svelte';
	import alert from '$lib/assets/img/alert.gif';

	//pets
	//cat
	import jessie from '$lib/assets/img/pets/jessie.webp';
	//spiders
	import fanger from '$lib/assets/img/pets/fanger.webp';
	import baron from '$lib/assets/img/pets/baron.webp';
	import tarantula3 from '$lib/assets/img/pets/tarantula3.webp';
	import Pet from '$lib/components/pet.svelte';

	//isopods

	//mantis
</script>

<div class="container">
	<h1>My Creatures</h1>
	<Window name="warning">
		<div class="imgwrap">
			<img src={alert} alt="" />
			<p style="text-align: center;">
				below are the creatures I currently have in my possession<br />they are mostly
				<span class="warning">bugs</span> so you have been warned!!!
			</p>
			<img src={alert} alt="" />
		</div>
	</Window>
	<Window name="cat">
		<Pet name="jessie" img={jessie} species="Domestic Shorthair">
			very silly kitty, loves to climb everywhere and scratch everything<br />
			her favourite food is tuna
		</Pet>
	</Window>
	<Window name="tarantulas">
		<div class="pets">
			<Pet name="fanger" img={fanger} species="Texas Tan">
				my first tarantula!<br />
				they like to hide a lot so i dont get to see them much, except for feeding.
			</Pet>
			<Pet name="baron" img={baron} species="Orange Baboon">
                gotten shortly after fanger, they are very shy and spends almost all their time in their burrow.
            </Pet>
			<Pet name="???" img={tarantula3} species="Venezuelan Suntiger">
                my biggest tarantula so far, they also like to hide a lot but sometimes can be quite feisty.<br>i have not decided on a name for them yet...
            </Pet>
		</div>
	</Window>
	<Window name="isopods"></Window>
	<Window name="mantis">
        <Pet name="???" img="" species="Budwing Mantis">
            not much to say about this guy. the main reason i got them was because they were all black, which is also my favourite colour :p
        </Pet>
    </Window>
</div>

<style lang="scss">
	@use '$lib/styles/variables' as vars;
	h1 {
		text-align: center;
		font-size: 3em;
		width: 100%;
	}
	.container {
		display: flex;
		flex-direction: column;

		padding: 1em;
		gap: 1em;
	}
	.pets {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}
	.warning {
		color: vars.$warning;
	}
</style>
