import type React from "react";
import styles from "./WavyText.module.scss"

interface WavyTextProps {
  children: any;
  colour?: "transgender" | "lesbian" | undefined;
}

const WavyText = ({ children, colour }: WavyTextProps) => {
  let colourStyle = "";
  const text = children.props.value;

  switch (colour) {
    case "transgender":
      colourStyle = styles.transColour;
      break;
    case "lesbian":
      colourStyle = styles.lesbianColour;
      break;
  }

  return (
    <span className={colourStyle}>
      {text.split("").map((char: string, index: number) => {
        return (
          <span key={index}>
            <span style={{ animationDelay: ((text.split("").length - index) * -0.1).toString() + "s" }} className={(colourStyle === "" ? "" : styles.wavyColour) + " " + styles.wavy}>{char}</span>
            <span> </span>
          </span>
        )
      })}
    </span>
  )
}

export default WavyText;