<script lang="ts">
	import { _ } from 'svelte-i18n';
	export let message = null;

	import { blink } from '$lib/animations/blink';
</script>

<div
	class="font-sans overflow-hidden text-center border-4 border-solid border-red-500 text-amber-300 mx-2.5"
	transition:blink
>
	<h2 class="bg-black text-base uppercase mt-24 mx-1 mb-2.5">{$_('error.generic.title')}</h2>
	<p class="bg-black text-base mt-2.5 mx-1 mb-24">{message || $_('error.generic.message')}</p>
</div>

<style>
	div {
		background: repeating-linear-gradient(-45deg, red, red 5px, black 5px, black 10px);
	}
</style>
