import { EmptyState } from '#/components/EmptyState';
import * as Layout from '#/components/web/Layout';

import PageCrossTextIcon from '#/icons/central/PageCrossText_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
import { useRouter } from '#/router';

export const NotFoundScreen = () => {
	const router = useRouter();

	const canGoBack = router.canGoBack;
	const onPressHome = () => {
		if (canGoBack) {
			router.back();
		} else {
			router.popTo({ name: 'Home' });
		}
	};

	const label = canGoBack ? m['common.action.goBack']() : m['common.action.goHome']();

	return (
		<Layout.Screen>
			<Layout.Header.Outer>
				<Layout.Header.BackButton />
				<Layout.Header.Content>
					<Layout.Header.TitleText>{m['common.error.pageNotFound']()}</Layout.Header.TitleText>
				</Layout.Header.Content>
			</Layout.Header.Outer>
			<EmptyState
				icon={PageCrossTextIcon}
				message={m['common.error.notFoundDescription']()}
				button={{
					color: 'primary',
					label,
					onPress: onPressHome,
					text: label,
				}}
			/>
		</Layout.Screen>
	);
};