/**
 * TEAM: frontend_infra
 * @flow strict
 */
import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import GraphicIcon from "./GraphicIcon";
import {whitespaceSizeConstants} from "./styles/whitespace";
import Text from "./Text";
import type {GraphicIcons} from "./tools/graphicIcons";
import typeof Button from "./button/Button";
import typeof AnchorButton from "./button/AnchorButton";

type Props = {|
  /** Sets the displayed graphic */
  +icon?: GraphicIcons,
  /** Text for the headline. This should be in sentence case. */
  +headline: string,
  /** Body text */
  +body: string,
  /** Pass in an optional call to action button */
  +callToAction?: React.Element<AnchorButton | Button>,
|};

function EmptyState({
  icon,
  headline,
  body,
  callToAction,
}: Props): React.Element<"div"> {
  return (
    <div className={css(styles.container)}>
      {icon && <GraphicIcon width={GRAPHIC_WIDTH} icon={icon} />}
      <div className={css(styles.headline)}>
        <Text scale="headline" weight="boldExtended" color="grey60">
          {headline}
        </Text>
      </div>
      <div className={css(styles.body)}>
        <Text weight="regular" color="grey40">
          {body}
        </Text>
      </div>
      {callToAction ? (
        <div className={css(styles.callToAction)}>{callToAction}</div>
      ) : null}
    </div>
  );
}

const MAX_WIDTH = 420;
const GRAPHIC_WIDTH = 190;

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    maxWidth: MAX_WIDTH,
  },
  headline: {
    paddingTop: whitespaceSizeConstants.l,
  },
  body: {
    paddingTop: whitespaceSizeConstants.s,
    textAlign: "center",
    maxWidth: MAX_WIDTH, // this is for IE because apparently IE doesn't take the width of the container size
  },
  callToAction: {
    paddingTop: whitespaceSizeConstants.l,
  },
});

export default EmptyState;