import { __ } from '@wordpress/i18n';
import BlockStack from '../../molecules/BlockStack/BlockStack';
import Card from '../../molecules/Card/Card';
import Button from '../Button/Button';

const ErrorFallback = () => {
	return (
		<BlockStack
			className="h-full"
			align="center"
			inlineAlign="center"
			gap={ 10 }
		>
			<Card padding={ 20 }>
				<BlockStack
					className="h-full"
					align="center"
					inlineAlign="center"
					gap={ 10 }
				>
					<h2>
						{ __(
							'Something went wrong 😢',
							'rewind-form-bridge-for-brevo'
						) }
					</h2>
					<Button
						startIcon="refresh"
						onClick={ () => window.location.reload() }
						variant="primary"
					>
						{ __( 'Reload page', 'rewind-form-bridge-for-brevo' ) }
					</Button>
				</BlockStack>
			</Card>
		</BlockStack>
	);
};

export default ErrorFallback;
