import * as React from 'react';
import { FC } from 'react';
import { style } from 'typestyle';

const Header: FC<{ isMobile: boolean; text: string }> = ({ isMobile, text }) => (
  <div className={styles.header(isMobile)}>
    <h2 className={styles.title(isMobile)}>{text}</h2>
  </div>
);

const styles = {
  header: (isMobile: boolean) => style({
    position: 'relative',
    padding: isMobile ? '6px 0':'9px 0',
    borderBottom: '1px solid black',
  }),

  title: (isMobile: boolean) => style({
    fontSize: isMobile ? 16 : 20,
    margin: 0,
    fontWeight: 'normal',
  }),
};

export default Header;
