@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/BoardingPassesInfo/InfoBox.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';
import Ticket from '@kiwicom/orbit-components/lib/icons/Ticket';

// TODO refactor to orbit
const styles = css`
  div.boardingPassesCard {
    margin: 22px 0 24px 0;
    width: 100%;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px #e8edf1;
  }
  div.iconTitle {
    margin: 25px 12px 8.6px 24px;
    display: inline-block;
  }
  h1.title {
    vertical-align: middle;
    display: inline-block;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: #171b1e;
    margin: 0;
  }
  div.subtitle {
    margin: 0 24px 24px;
  }
`;

type Props = {|
  children: React.Node,
|};

const InfoBox = ({ children }: Props) => (
  <div className="boardingPassesCard">
    <div className="iconTitle">
      <Ticket customColor="black" />
    </div>
    <h1 className="title">
      <Translate t="smartfaq.boarding_pass_info.title" />
    </h1>
    <div className="subtitle">
      <Text type="attention" t="smartfaq.boarding_pass_info.subtitle" />
    </div>
    {children}
    <style jsx>{styles}</style>
  </div>
);

export default InfoBox;