import { useGoBack } from '#/lib/hooks/use-go-back';
import * as css from '#/components/Error.css';
import { Text } from '#/components/Text';
import { Button, ButtonText } from '#/components/web/Button';
import { m } from '#/paraglide/messages';
export function Error({
hideBackButton,
message,
onGoBack,
onRetry,
title,
}: {
hideBackButton?: boolean;
message: string;
onGoBack?: () => unknown;
onRetry?: () => unknown;
title: string;
}) {
const goBack = useGoBack(onGoBack);
return (
<div className={css.outer}>
<div className={css.textGroup}>
<Text size="_3xl" weight="semiBold">
{title}
</Text>
<Text align="center" className={css.message} color="textContrastHigh" size="md">
{message}
</Text>
</div>
<div className={css.buttonGroup}>
{onRetry && (
<Button
color="primary"
label={m['common.a11y.pressToRetry']()}
onClick={() => void onRetry()}
size="large"
variant="solid"
>
<ButtonText>{m['common.action.retry']()}</ButtonText>
</Button>
)}
{!hideBackButton && (
<Button
color={onRetry ? 'secondary' : 'primary'}
label={m['common.action.returnToPreviousPage']()}
onClick={goBack}
size="large"
variant="solid"
>
<ButtonText>{m['common.action.goBackTitle']()}</ButtonText>
</Button>
)}
</div>
</div>
);
}