<script lang="ts" setup>
	const p = defineProps<{ error: any }>();
	const unError = {
		...p.error,
		stack: undefined,
	};

	const copied = `
\`${JSON.stringify(unError, null, "\t")}\`

---

Stack trace:

\`\`\`
${p.error.stack}
\`\`\`
`;
</script>
<template>
	<a-typography-title> We ran into an issue.... :( <br /> </a-typography-title>
	<a-typography-paragraph
		style="font-size: 125%"
		:copyable="{
			text: copied,
			tooltip: true,
			onCopy: () => {
				setTimeout(() => {
					clearError({ redirect: '/' });
					navigateTo('/');
				}, 30000);
			},
		}"
	>
		<a-typography-text code>
			{{ JSON.stringify(unError, null, "\t") }}
		</a-typography-text>
		<a-typography-title :level="4"> Stack trace: </a-typography-title>
		<a-typography-text>
			<a-typography-text v-html="error.stack"> </a-typography-text>
		</a-typography-text>
	</a-typography-paragraph>
</template>