import React, { useState } from "react";

import { Text } from "../Text";
import { View } from "../View";
import styles from "./styles";

type Props = {
  children: React.ReactNode;
  tip: string;
};

const Tooltip = ({ tip, children }: Props) => {
  const [hover, setHover] = useState(false);

  return (
    <View
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      {hover && (
        <View style={styles.tooltip}>
          <Text size="xs" variant="primary" bold numberOfLines={1}>
            {tip}
          </Text>
        </View>
      )}
      {children}
    </View>
  );
};

export default Tooltip;