<script lang="ts">
	import noResult from '$lib/assets/img/no-data.svg';
	import Button from '$lib/components/ui/form-elements/Button.svelte';
	let { title = 'No results', message = 'Try checking your search term' } = $props();
</script>

<div class="no-results-state">
	<img src={noResult} class="image" height="200" width="200" alt="" role="presentation" />
	<h3>{title}</h3>
	<p>{message}</p>
	<div class="btn-container">
		<Button
			type="button"
			onclick={() => (history.length > 1 ? history.back() : (window.location.href = '/'))}
			color="accent"
		>
			Go back
		</Button>
	</div>
</div>

<style>
	.no-results-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		min-height: 400px;
		padding: 5rem;
		text-align: center;
		box-sizing: border-box;
		font-family: 'URW-Gothic', sans-serif;
	}

	.image {
		margin-bottom: 1.95rem;
		max-width: 90%;
		height: auto;
	}

	h3 {
		margin: 0 0 0.5rem 0;
	}

	p {
		margin: 0;
		opacity: 0.8;
	}

	.btn-container {
		margin-top: 20px;
	}
</style>
