import styles from "./styles.module.css";
import { stepsQuestionary } from "@/data";

interface IGoalProps {
  goal: string;
}

function Goal({ goal }: IGoalProps) {
  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 src="/darts-purple.svg" alt="Darts icon" />
      <div className={styles["text-container"]}>
        <span>Goal</span>
        <p>{getGoal() || ""}</p>
      </div>
    </div>
  );
}

export default Goal;
