"use client";

import ParenthesesPreparationClient from "@/components/game/ParenthesesPreparationClient";
import { useGameStore } from "@/store/gameStore";

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

  return (
    <ParenthesesPreparationClient
      eyebrow="숫자 괄호 학습 준비"
      title="숫자 괄호 풀기"
      description="정수로 이루어진 괄호식을 풀며 음수 분배와 부호 변화를 연습합니다."
      notice="현재는 소괄호 숫자 문제만 선택할 수 있습니다."
      playHref={`/number-parentheses/play?count=${selectedProblemCount}&terms=${selectedMaxTermCount}`}
      selectedProblemCount={selectedProblemCount}
      selectedMaxTermCount={selectedMaxTermCount}
      onProblemCountChange={setProblemCount}
      onMaxTermCountChange={setMaxTermCount}
      onStart={() => initSession(selectedProblemCount, selectedMaxTermCount)}
    />
  );
}