import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.css";
import { stepsQuestionary } from "../../../../data/stepsQuestionary";
import { ELocalesPlacement } from "@/locales";

interface IGoalProps {
  goal: string;
}

function Goal({ goal }: IGoalProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);

  const getGoal = () => {
    const question = stepsQuestionary[0].questions.find(
      (question) => question.id === "goal"
    );
    return question?.answers?.find((answer) => answer.id === goal)?.answer;
  };

  return (
    <div className={styles.goal}>
      <img className={styles.image} src="/darts-purple.svg" alt="Darts icon" />
      <div className={styles["text-container"]}>
        <span>{translate("goal")}</span>
        <p>{translate(getGoal() || "")}</p>
      </div>
    </div>
  );
}

export default Goal;
