@kiwicom/smart-faq/src/shared/StaticFAQ/emergencies/EmergencyHeader.js

// @flow

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

import { Desktop, Mobile } from '../../../SmartFAQ/common/Responsive';

type Props = {|
  title: string,
  styles?: string,
|};

const renderHeader = (className: string, title: string, styles?: string) => (
  <div className={className}>
    <Heading type="title3">
      <Translate t={title} />
    </Heading>
    <style jsx>
      {`
        .emergencyHeader {
          margin-bottom: 16px;
          ${styles ? styles : ''};
        }
        .emergencyHeaderMobile {
          margin: 22px;
        }
      `}
    </style>
  </div>
);

const EmergencyHeader = ({ title, styles }: Props) => (
  <div>
    <Desktop>{renderHeader('emergencyHeader', title, styles)}</Desktop>
    <Mobile>{renderHeader('emergencyHeaderMobile', title, styles)}</Mobile>
  </div>
);

export default EmergencyHeader;