<script lang="ts">
	import { browser } from '$app/environment';
	import { Button } from '$lib/components/ui/button';
	import Empty from '$lib/components/Empty.svelte';
	import { m } from '$lib/paraglide/messages';
	import { localizeHref } from '$lib/paraglide/runtime';
	import { ServerCrash } from '@lucide/svelte';
</script>

<Empty
	title={m.internal_server_error()}
	description={m.sorry_something_went_wrong_on_our_end_we_are_currently_trying_to_fix_the_problem()}
>
	{#snippet icon()}
		<ServerCrash />
	{/snippet}

	{#snippet content()}
		<div class="flex gap-2">
			<Button
				onclick={() => {
					if (browser) location.reload();
				}}>{m.reload_page()}</Button
			>
			<Button variant="secondary" href={localizeHref('/')}>{m.to_main_page()}</Button>
		</div>
	{/snippet}
</Empty>
