marriage/src/components/Componentes/question-checkbox.tsx

"use client";

import type { QuestionField } from "@/data/question-data";
import { useQuestionAnswers } from "./question-answer-storage";
import QuestionTitle from "./question-title";

type QuestionCheckboxProps = {
  question: QuestionField;
  questionIndex: number;
  disabled?: boolean;
};

export function QuestionCheckbox({
  question,
  questionIndex,
  disabled,
}: QuestionCheckboxProps) {
  const options = question.extras.options || [];
  const { getAnswerValue, setAnswerValue } = useQuestionAnswers();
  const rawValue = getAnswerValue(question, questionIndex);

  const value = Array.isArray(rawValue)
    ? rawValue
    : rawValue
      ? [String(rawValue)]
      : [];

  if (options.length === 0) {
    return null;
  }

  const toggleOption = (option: string) => {
    let nextValue: string[];
    if (value.includes(option)) {
      nextValue = value.filter((v) => v !== option);
    } else {
      nextValue = [...value, option];
    }

    const exclusiveOption = options.find(
      (o) =>
        o.includes("مهم نیست") ||
        o.includes("Doesn't matter") ||
        o.includes("No children") ||
        o.includes("فرزندی ندارم.") ||
        o.includes("مسئولیت مستمری ندارم") ||
        o.includes("do not have any ongoing responsibility"),
    );
    if (exclusiveOption) {
      if (option === exclusiveOption) {
        nextValue = [exclusiveOption];
      } else if (nextValue.includes(exclusiveOption)) {
        nextValue = nextValue.filter((v) => v !== exclusiveOption);
      }
    }

    setAnswerValue(
      question,
      questionIndex,
      nextValue.length > 0 ? nextValue : null,
    );
  };

  const isShortOptions =
    options.length <= 4 && options.every((opt) => opt.length <= 15);

  return (
    <div
      className={[
        "flex w-full flex-col gap-3.5 transition-opacity duration-200",
        disabled ? "pointer-events-none opacity-30" : "",
      ].join(" ")}
    >
      <QuestionTitle question={question} />

      <div
        className={
          isShortOptions
            ? "flex flex-row flex-wrap items-center gap-3 pt-1"
            : "flex flex-col gap-3.5 pt-1"
        }
      >
        {options.map((option) => {
          const optionId = `checkbox-${questionIndex}-${option}`;
          const isSelected = value.includes(option);

          return (
            <label
              key={option}
              htmlFor={optionId}
              className={[
                "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3",
                isShortOptions
                  ? "flex-1 min-w-[90px] px-5 py-3.5 text-center justify-center"
                  : "w-full px-5 py-4 text-start leading-snug",
                isSelected
                  ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
                  : "bg-[#FAFAFA] text-[#181818] hover:bg-white shadow-[0_2px_6px_rgba(0,0,0,0.03)] border border-[#F0EDED]",
              ].join(" ")}
            >
              <input
                type="checkbox"
                id={optionId}
                checked={isSelected}
                disabled={disabled}
                onChange={() => toggleOption(option)}
                className="sr-only"
              />
              {!isShortOptions && (
                <div
                  className={[
                    "size-[18px] shrink-0 rounded-[5px] border-[2px] transition-all flex items-center justify-center",
                    isSelected
                      ? "border-white bg-white text-[#F0445B]"
                      : "border-[#D0D5DD] bg-white text-transparent",
                  ].join(" ")}
                >
                  {isSelected && (
                    <svg
                      width="10"
                      height="8"
                      viewBox="0 0 10 8"
                      fill="none"
                      className="stroke-current stroke-[2]"
                    >
                      <path
                        d="M1 4L3.5 6.5L9 1"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  )}
                </div>
              )}
              <span className="flex-1">{option}</span>
            </label>
          );
        })}
      </div>
    </div>
  );
}

export default QuestionCheckbox;