import { Text } from '#/components/Text';

import ArrowRotateClockwiseIcon from '#/icons/central/ArrowRotateClockwise_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 './ErrorMessage.css';

export function ErrorMessage({
	message,
	onPressTryAgain,
}: {
	message: string;
	onPressTryAgain?: () => void;
}) {
	return (
		<div className={css.outer}>
			<div className={css.iconBox}>
				<WarningIcon className={css.icon} />
			</div>
			<Text className={css.message} size="md" weight="medium" color="white">
				{message}
			</Text>
			{onPressTryAgain && (
				<button
					aria-label={m['common.action.retry']()}
					className={css.retry}
					onClick={onPressTryAgain}
					type="button"
				>
					<ArrowRotateClockwiseIcon className={css.icon} />
				</button>
			)}
		</div>
	);
}