"use client";

import { IoInformation } from "react-icons/io5";
import type { QuestionField } from "@/data/question-data";
import { useQuestionAnswer } from "./question-answer-storage";
import QuestionTitle from "./question-title";

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

export function QuestionButton({
  question,
  questionIndex,
  disabled,
}: QuestionButtonProps) {
  const { setValue, value } = useQuestionAnswer(question, questionIndex);
  const isAnswered = value === true;

  return (
    <div
      data-question-answered={isAnswered ? "true" : undefined}
      data-question-type={question.type}
      className={[
        "space-y-3 transition-opacity duration-200",
        disabled ? "pointer-events-none opacity-30" : "",
      ].join(" ")}
    >
      <div className="flex items-center gap-2">
        <QuestionTitle question={question} />
        {question.tooltip ? (
          <span className="mt-0.5 flex h-[14px] w-[14px] items-center justify-center rounded-full bg-[#F24E63] text-white">
            <IoInformation aria-hidden="true" className="text-[9px]" />
          </span>
        ) : (
          <span className="h-[14px] w-[14px]" aria-hidden="true" />
        )}
      </div>
      <button
        type="button"
        disabled={disabled}
        onClick={() => setValue(true)}
        className="min-h-[50px] rounded-[15px] bg-[#181818] px-5 py-3 group-14 font-semibold text-white"
      >
        {question.extras.options[0] ||
          question.extras.placeHolder ||
          "Continue"}
      </button>
    </div>
  );
}

export default QuestionButton;