"use client";

import {
  RadioAnswersList,
  RadioAnswersListProps,
} from "@/components/widgets/RadioAnswersList/RadioAnswersList";
import {
  LayoutQuestion,
  LayoutQuestionProps,
} from "@/components/layout/LayoutQuestion/LayoutQuestion";
import {
  SelectAnswersList,
  SelectAnswersListProps,
} from "@/components/widgets/SelectAnswersList/SelectAnswersList";

interface QuestionProps
  extends Omit<React.ComponentProps<"div">, "title" | "content"> {
  layoutQuestionProps: Omit<LayoutQuestionProps, "children">;
  content: RadioAnswersListProps | SelectAnswersListProps;
  contentType: "radio-answers-list" | "select-answers-list";
}

function Question({
  layoutQuestionProps,
  content,
  contentType,
  ...props
}: QuestionProps) {
  return (
    <LayoutQuestion {...layoutQuestionProps}>
      {content && (
        <div className="w-full mt-[30px]" {...props}>
          {contentType === "radio-answers-list" && (
            <RadioAnswersList {...(content as RadioAnswersListProps)} />
          )}
          {contentType === "select-answers-list" && (
            <SelectAnswersList {...(content as SelectAnswersListProps)} />
          )}
        </div>
      )}
    </LayoutQuestion>
  );
}

export { Question };