/**
 * TEAM: frontend_infra
 * @flow strict
 */

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import Text from "../Text";
import Tooltip from "../Tooltip";

type Props = {|
  +tooltipText?: ?string,
|};

export default function NotApplicableCell({
  tooltipText,
}: Props): React.Element<"div"> {
  const content = (
    <div className={css(styles.container)}>
      <Text scale="subtext" color="grey40">
        n/a
      </Text>
    </div>
  );
  return tooltipText != null ? (
    <div className={css(styles.tooltipWrapper)}>
      <Tooltip placement="bottom" overlay={<span>{tooltipText}</span>}>
        {content}
      </Tooltip>
    </div>
  ) : (
    content
  );
}

const styles = StyleSheet.create({
  container: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  tooltipWrapper: {
    display: "flex",
    width: "100%",
  },
});