import { Accordion } from "@/components/ui/accordion";
import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { CommonQuestion } from "../..";
import { cn } from "@/lib/utils";
import { useId } from "react";

interface CommonQuestionsProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  title?: TypographyProps<"h3">;
  questions?: React.ComponentProps<typeof CommonQuestion>[];
  accordionProps?: React.ComponentProps<typeof Accordion>;
}

export default function CommonQuestions({
  title,
  questions,
  accordionProps,
  ...props
}: CommonQuestionsProps) {
  const commonQuestionId = useId();
  return (
    <div {...props} className={cn("w-full", props.className)}>
      {title && (
        <Typography
          as="h3"
          weight="bold"
          font="inter"
          align="center"
          size="2xl"
          {...title}
          className={cn(
            "text-trial-payment-foreground leading-[32px]",
            title.className
          )}
        />
      )}
      {!!questions?.length && (
        <Accordion
          className="w-full mt-6 flex flex-col items-center gap-4"
          type="single"
          {...accordionProps}
        >
          {questions?.map((question, index) => (
            <CommonQuestion
              key={`${commonQuestionId}-${index}`}
              {...question}
            />
          ))}
        </Accordion>
      )}
    </div>
  );
}
