text: // @flow
  import * as React from 'react';
  import { Link } from 'react-router-dom';
  import Icon from 'src/components/icon';
  import { Button, OutlineButton } from 'src/components/button';
  import {
    Title,
    MiniTitle,
    Subtitle,
    MiniSubtitle,
    Actions,
    NullCol,
    LargeEmoji,
    HeadingIconWrapper,
  } from './style';
  
  type NullCardProps = {
    noShadow?: boolean,
    noPadding?: boolean,
    bg?: ?string,
    heading?: string,
    copy?: string,
    children?: React$Node,
    repeat?: boolean,
    emoji?: string,
  };
  export const NullCard = (props: NullCardProps) => {
    return (
      <NullCol bg={props.bg} repeat={props.repeat} noPadding={props.noPadding}>
        {props.headingIcon && (
          <HeadingIconWrapper>{props.headingIcon}</HeadingIconWrapper>
        )}
        {props.heading && <Title>{props.heading}</Title>}
        {props.copy && <Subtitle>{props.copy}</Subtitle>}
        {props.children}
      </NullCol>
    );
  };
  
  export const MiniNullCard = (props: NullCardProps) => {
    return (
      <NullCol bg={props.bg} repeat={props.repeat} noPadding={props.noPadding}>
        {props.emoji && (
          <LargeEmoji>
            <span role="img" aria-label="Howdy!">
              {props.emoji}
            </span>
          </LargeEmoji>
        )}
        {props.heading && <MiniTitle>{props.heading}</MiniTitle>}
        {props.copy && <MiniSubtitle>{props.copy}</MiniSubtitle>}
        {props.children}
      </NullCol>
    );
  };
  
  type NullStateProps = {
    bg?: ?string,
    heading?: string,
    copy?: string,
    icon?: string,
    children?: React$Node,
  };
  export const NullState = (props: NullStateProps) => (
    <NullCol bg={props.bg}>
      {props.icon && <Icon glyph={props.icon} size={64} />}
      {props.heading && <Title>{props.heading}</Title>}
      {props.copy && <Subtitle>{props.copy}</Subtitle>}
      {props.children}
    </NullCol>
  );
  
  export const Upsell404Channel = ({ community }: { community: string }) => {
    return (
      <Actions>
        <Link to={`/${community}`}>
          <Button large>Take me back</Button>
        </Link>
      </Actions>
    );
  };
  
  export const Upsell404Community = () => {
    // if a user doesn't have permission, it means they likely tried to view
    // the settings page for a community. In this case, we will return
    // them to the community view.
    // if the user does have permission, but this component gets rendered, it means
    // something went wrong - most likely the community doesn't exists (404) so
    // we should return the user back to homepage
    return (
      <Actions>
        <Link to={'/'}>
          <OutlineButton large>Take me back</OutlineButton>
        </Link>
      </Actions>
    );
  };
  
  export const Upsell404Thread = () => {
    return (
      <NullCard
        bg="post"
        heading="Oops, something got lost!"
        copy="We can't find that thread. Maybe it floated off into space..."
      >
        <Button onClick={() => (window.location.href = '/home')}>
          Take me home
        </Button>
      </NullCard>
    );
  };
  
  export const UpsellReload = () => (
    <NullCard
      bg="error"
      heading={'Whoops!'}
      copy={'Something went wrong on our end... Mind reloading?'}
    >
      <Button onClick={() => window.location.reload(true)}>Reload</Button>
    </NullCard>
  );
  