import React from "react";
import PropTypes from "prop-types";
import styles from "./Tooltip.css";
import componentCategories from "../../../docs-utils/componentCategories";
import componentGroups from "../../../docs-utils/componentGroups";

export default function Tooltip(props) {
  let {
    style,
    variant,
    roundedCorners,
    width,
    tooltipPosition,
    hover,
    tooltip
  } = props;
  return (
    <div className={styles.tooltipContainer}>
      <div className={styles.tooltipMessage}>{tooltip}</div>
      <div
        className={
          styles.tooltip +
          " " +
          styles.smallArrow +
          " " +
          styles[tooltipPosition] +
          " " +
          styles[variant] +
          " " +
          `${hover ? styles.hover : null}` +
          " " +
          `${roundedCorners ? styles.rounded : null}`
        }
        width={width}
      >
        {tooltip}
      </div>
    </div>
  );
}

Tooltip.defaultProps = {
  tooltipPosition: "bl",
  hover: true,
  tooltip: "This message is a demo for tooltip",
  variant: "dark",
  roundedCorners: false
};

if (__DOCS__) {
  Tooltip.docs = {
    componentGroup: componentGroups.Atom,
    folderName: componentCategories.General
  };
}
