@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/BookingError.js

// @flow

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

// TODO refactor -> get rid of custom css below
const style = css`
  .BookingError {
    width: 480px;
    padding: 40px;
    background-color: #f5f7f9;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  h1.title {
    font-size: 28px;
    font-weight: bold;
    line-height: 100%;
    color: #171b1e;
    margin-bottom: 8px;
  }
`;

const BookingError = () => (
  <div className="BookingError">
    <h1 className="title">
      <Translate html t="smartfaq.single_booking_page.booking_error.title" />
    </h1>
    <Text
      type="secondary"
      size="large"
      html
      t="smartfaq.single_booking_page.booking_error.text"
    />
    <style jsx>{style}</style>
  </div>
);

export default BookingError;