"use client";

import CheckboxGroup from "../../../../components/controls/CheckboxGroup";
import { useMessages } from "../../../../contexts/MessagesContext";
import { useCreateFlow } from "../../context/CreateFlowContext";
import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
import {
  setupTraitsFromTickedIds,
  tickedSetupTraitIds,
} from "../../../../../lib/create/setupTraits";

/**
 * Create Community — Figma Flow - Checkboxes (25224:105566).
 */
export function SetupQuestionsScreen() {
  const copy = useMessages().create.community.setupQuestions;
  const { markCreateFlowInteraction, updateState, state } = useCreateFlow();

  return (
    <CreateFlowTwoColumnSelectShell
      header={
        <CreateFlowHeaderLockup
          title={copy.title}
          description={copy.description}
          justification="left"
        />
      }
    >
      <CheckboxGroup
        value={tickedSetupTraitIds(state.setupTraits)}
        onChange={({ value }) => {
          markCreateFlowInteraction();
          updateState({ setupTraits: setupTraitsFromTickedIds(value) });
        }}
        options={copy.questions.map((question) => ({
          value: question.id,
          label: question.label,
          subtext: question.help,
        }))}
        aria-label={copy.title}
        className="flex w-full flex-col gap-[20px] !space-y-0"
      />
    </CreateFlowTwoColumnSelectShell>
  );
}