'use no memo'; // generated cache cost outweighs reuse in these shallow renderers

import { Text } from '#/components/Text';
import { Button, ButtonIcon, ButtonText } from '#/components/web/Button';
import * as Layout from '#/components/web/Layout';

import ArrowRotateCounterClockwiseIcon from '#/icons/central/ArrowRotateCounterClockwise_round_outlined_radius1_stroke2.svg';
import WarningIcon from '#/icons/central/ExclamationTriangle_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

import * as css from './ErrorScreen.css';

export function ErrorScreen({
	title,
	message,
	details,
	onPressTryAgain,
	showHeader,
}: {
	title: string;
	message: string;
	details?: string;
	onPressTryAgain?: () => void;
	showHeader?: boolean;
}) {
	return (
		<>
			{showHeader && (
				<Layout.Header.Outer>
					<Layout.Header.BackButton />
					<Layout.Header.Content>
						<Layout.Header.TitleText>{m['common.error.heading']()}</Layout.Header.TitleText>
					</Layout.Header.Content>
				</Layout.Header.Outer>
			)}
			<div className={css.outer}>
				<div className={css.badge}>
					<WarningIcon className={css.warningIcon} />
				</div>
				<Text className={css.title} size="_2xl" weight="bold">
					{title}
				</Text>
				<Text className={css.message} size="md">
					{message}
				</Text>
				{details && (
					<div className={css.details}>
						<Text color="textContrastHigh" size="md">
							{details}
						</Text>
					</div>
				)}
				{onPressTryAgain && (
					<Button
						color="secondary_inverted"
						label={m['common.action.retry']()}
						onClick={onPressTryAgain}
						size="small"
						variant="solid"
					>
						<ButtonIcon icon={ArrowRotateCounterClockwiseIcon} />
						<ButtonText>{m['common.action.tryAgain']()}</ButtonText>
					</Button>
				)}
			</div>
		</>
	);
}