@kiwicom/smart-faq/src/shared/StaticFAQ/StaticFAQError.js

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import { Text, Heading } from '@kiwicom/orbit-components';
import Translate from '@kiwicom/nitro/lib/components/Translate';

import ContactUsLink from '../../SmartFAQ/common/ContactUsLink/ContactUsLink';

const style = css`
  .staticFAQError {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .title {
    margin-bottom: 8.4px;
  }
  div.contactLink {
    margin-top: 16.8px;
  }
`;

const StaticFAQError = () => (
  <div className="staticFAQError">
    <div className="title">
      <Heading>
        <Translate html t="smartfaq.single_booking_page.booking_error.title" />
      </Heading>
    </div>
    <Text type="secondary" size="large">
      <Translate html t="smartfaq.faq.error_page.description" />
    </Text>
    <div className="contactLink">
      <ContactUsLink
        translationKey={__('smartfaq.faq.article.contact_page_link')}
      />
    </div>
    <style jsx>{style}</style>
  </div>
);

export default StaticFAQError;