import React from 'react'
import './ErrorPage.scss'
import {Icon, LinkAria} from '$core-components'
import urlGenerator from '$ustoreinternal/services/urlGenerator'
import {t} from '$themelocalization'
import Layout from '../components/layout'

const ProductOffline = (props) => {

    return <Layout {...props} classname="product-offline">
        <div className={"ng-error-page-wrapper offline product-offline"}>
            <div className="inner-wrapper">
                <div className="error-icon">
                    <Icon name={'sand_clock.svg'} width="100%x" height="100%"/>
                </div>
                <div className="error-page-main-text">
                    <>{t("NGPages.ProductOffline.TitlePartOne")}<br/>{t("NGPages.ProductOffline.TitlePartTwo")}</>
                </div>
                <div className={`error-page-sub-text`}>
                    {t("NGPages.ProductOffline.SubText")}
                </div>
                <LinkAria to={urlGenerator.get({page: 'home'})}>
                    <div
                        className="button button-primary truncate action-button">{t("NGPages.ProductOffline.BackToHome")}</div>
                </LinkAria>
            </div>
        </div>
    </Layout>

}

export default ProductOffline
