import { EDirectionOnboarding } from "@/types";
import styles from "./styles.module.css";

interface TextWithFingerProps {
  text: string;
  showCross?: boolean;
  direction?: EDirectionOnboarding;
  classNameText?: string;
  crossClickHandler?: () => void;
}

function TextWithFinger({
  text,
  showCross = true,
  direction = EDirectionOnboarding.TOP,
  classNameText = "",
  crossClickHandler,
}: TextWithFingerProps): JSX.Element {
  return (
    <>
      {text.length && (
        <div className={`${styles["onboarding-text"]} ${classNameText}`}>
          {showCross && (
            <div className={styles["cross"]} onClick={crossClickHandler}></div>
          )}
          {text}
        </div>
      )}
      <img
        className={`${styles["finger"]} ${styles[`direction-${direction}`]}`}
        src="/finger1.svg"
        alt="finger"
      />
    </>
  );
}

export default TextWithFinger;
