import { useTranslations } from "@/hooks/translations";
import Title from "../Title";
import styles from "./styles.module.css";

interface IStartBreathModalChildProps {
  handleBegin: () => void;
  isShowNavbar: boolean;
}

function StartBreathModalChild({
  handleBegin,
  isShowNavbar=false
}: IStartBreathModalChildProps): JSX.Element {
  const { translate } = useTranslations();

  return (
    <section className={`${styles["start-breath"]} page ${isShowNavbar ? styles["show-navbar"] : ""}`}>
      {/* <div className={styles.cross} onClick={handleBegin}></div> */}
      <div className={styles.text}>
        <Title variant="h4" className={styles["breathe-title"]}>
          {translate("breathe-title")
            .split("")
            .map((symbol, index) => (
              <span
                className={styles["symbol"]}
                style={{ animationDelay: `${index * 0.05}s` }}
                key={index}
              >
                {symbol}
              </span>
            ))}
        </Title>
        <Title variant="h4" className={styles["breathe-subtitle"]}>
          {translate("breathe-subtitle")
            .split("")
            .map((symbol, index) => (
              <span
                className={styles["symbol"]}
                style={{
                  animationDelay: `${
                    (translate("breathe-title").split("").length + index) * 0.05
                  }s`,
                }}
                key={index}
              >
                {symbol}
              </span>
            ))}
        </Title>
      </div>
      <button type="button" className={styles.begin} onClick={handleBegin}>
        {translate("aura-begin_breathe-button")}
      </button>
    </section>
  );
}

export default StartBreathModalChild;
