"use client";

import { cn } from "@/lib/utils";
import {
  MainButton,
  MainButtonProps,
} from "@/components/ui/MainButton/MainButton";

export interface AnswersListProps extends React.ComponentProps<"div"> {
  answers: MainButtonProps[];
  activeAnswers: MainButtonProps[] | null;
  onAnswerClick: (answer: MainButtonProps) => void;
}

function AnswersList({
  className,
  answers,
  activeAnswers,
  onAnswerClick,
  ...props
}: AnswersListProps) {
  return (
    <div className={cn("flex flex-col gap-3 w-full", className)} {...props}>
      {answers.map((answer) => (
        <MainButton
          key={answer.id}
          {...answer}
          onClick={() => onAnswerClick(answer)}
          active={activeAnswers?.includes(answer)}
        />
      ))}
    </div>
  );
}

export { AnswersList };
