"use client";

import ParenthesesPreparationClient from "@/components/game/ParenthesesPreparationClient";
import { useVariableGameStore } from "@/store/variableGameStore";

export default function VariableParenthesesClient() {
  const selectedProblemCount = useVariableGameStore(
    (state) => state.selectedProblemCount,
  );
  const setProblemCount = useVariableGameStore(
    (state) => state.setProblemCount,
  );
  const selectedMaxTermCount = useVariableGameStore(
    (state) => state.selectedMaxTermCount,
  );
  const setMaxTermCount = useVariableGameStore(
    (state) => state.setMaxTermCount,
  );
  const initSession = useVariableGameStore((state) => state.initSession);

  return (
    <ParenthesesPreparationClient
      eyebrow="미지수 괄호 학습 준비"
      title="미지수 괄호 풀기"
      description="괄호 안의 한 항에 미지수 x가 들어간 식을 풀며 부호 변화를 연습합니다."
      notice="현재는 소괄호와 미지수 x 문제만 선택할 수 있습니다."
      playHref={`/variable-parentheses/play?count=${selectedProblemCount}&terms=${selectedMaxTermCount}`}
      selectedProblemCount={selectedProblemCount}
      selectedMaxTermCount={selectedMaxTermCount}
      onProblemCountChange={setProblemCount}
      onMaxTermCountChange={setMaxTermCount}
      onStart={() => initSession(selectedProblemCount, selectedMaxTermCount)}
    />
  );
}