import { useTranslations } from "next-intl";

import { Button, Typography } from "@/components/ui";

import styles from "./StartBreathModalChild.module.scss";

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

function StartBreathModalChild({ handleBegin }: IStartBreathModalChildProps) {
  const t = useTranslations("Meditation");

  return (
    <section className={styles.container}>
      <div className={styles.text}>
        <Typography
          as="h4"
          weight="semiBold"
          color="white"
          className={styles.title}
        >
          {t("title")
            .split("")
            .map((symbol, index) => (
              <span
                className={styles.symbol}
                style={{ animationDelay: `${index * 0.05}s` }}
                key={index}
              >
                {symbol}
              </span>
            ))}
        </Typography>
        <Typography as="h4" className={styles.subtitle}>
          {t("subtitle")
            .split("")
            .map((symbol, index) => (
              <span
                className={styles.symbol}
                style={{
                  animationDelay: `${
                    (t("title").split("").length + index) * 0.05
                  }s`,
                }}
                key={index}
              >
                {symbol}
              </span>
            ))}
        </Typography>
      </div>
      <Button className={styles.button} onClick={handleBegin}>
        <Typography weight="bold" color="white">
          {t("button")}
        </Typography>
      </Button>
    </section>
  );
}

export default StartBreathModalChild;
