<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-extract-style>
		<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>
	</a-extract-style>
</template>
