import { React, css, constants, color } from '../common';

export default () => <UnsupportedBrowser />;
export interface IUnsupportedBrowserProps {}
export const UnsupportedBrowser = (props: IUnsupportedBrowserProps) => {
  const styles = {
    base: css({
      Absolute: 0,
      backgroundColor: constants.COLORS.BLUE,
      Flex: 'center-center',
      color: 'white',
      lineHeight: '1.5em',
    }),
    contentOuter: css({ marginBottom: '10%' }),
    hr: css({
      borderTop: `solid 5px ${color.format(0.3)}`,
      marginTop: 12,
      paddingTop: 12,
    }),
  };

  return (
    <div {...styles.base}>
      <div {...styles.contentOuter}>
        <div>Friends don’t let friends use Internet Explorer!</div>
        <div {...styles.hr}>We love you, but alas not this browser.</div>
        <div>We recommend reloading in Chrome or Firefox.</div>
        <div>Thank you.</div>
      </div>
    </div>
  );
};
