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

	import Pet from '$lib/components/pet.svelte';
	import Colony from '$lib/components/colony.svelte';
	//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';

	//isopods
	import pod1 from "$lib/assets/img/pets/isopods/pod1.webp";
	import pod2 from "$lib/assets/img/pets/isopods/pod2.webp";
	import pod3 from "$lib/assets/img/pets/isopods/pod3.webp";
	import pod4 from "$lib/assets/img/pets/isopods/pod4.webp";
	import pod5 from "$lib/assets/img/pets/isopods/pod5.webp";
	import pod6 from "$lib/assets/img/pets/isopods/pod6.webp";

	//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 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="isopod colonies">
		<div class="colonies">
			<Colony species="UK Native Mix" img={pod1}></Colony>
			<Colony species="Dairy Cows" img={pod2}></Colony>
			<Colony species="Dwarf Whites" img={pod3}></Colony>
			<Colony species="Lava" img={pod4}></Colony>
			<Colony species="Powder Orange" img={pod5}></Colony>
			<Colony species="Granulated" img={pod6}></Colony>
		</div>
	</Window>
	<Window name="mantis">
		<Pet name="???" img="" species="Budwing Mantis">
			not much to say about this guy.<br />he is not the mantis from kung-fu panda...
		</Pet>
	</Window>
</div>

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

		padding: 1em;
		gap: 1em;
	}
	.pets {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}
	.colonies {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1em;

		// temp until i figure out how to stop div from maxing out width
		width: 600px; 
	}
	.warning {
		color: vars.$warning;
	}
</style>
