"use client";

import {
  BottomActionButton,
  BottomActionButtonProps,
} from "@/components/widgets/BottomActionButton/BottomActionButton";
import { useDynamicSize } from "@/hooks/DOM/useDynamicSize";
import { cn } from "@/lib/utils";

interface QuestionInformationProps extends React.ComponentProps<"div"> {
  image?: React.ReactNode;
  text?: React.ReactNode;
  bottomActionButtonProps?: BottomActionButtonProps;
}

function QuestionInformation({
  image,
  text,
  bottomActionButtonProps,
  ...props
}: QuestionInformationProps) {
  const {
    height: bottomActionButtonHeight,
    elementRef: bottomActionButtonRef,
  } = useDynamicSize<HTMLDivElement>({
    defaultHeight: 132,
  });

  return (
    <div
      className="w-full flex flex-col items-center gap-[22px]"
      {...props}
      style={{
        paddingBottom: `${bottomActionButtonHeight}px`,
        ...props.style,
      }}
    >
      {image}
      {text}
      {bottomActionButtonProps && (
        <BottomActionButton
          {...bottomActionButtonProps}
          className={cn("max-w-[560px]", bottomActionButtonProps.className)}
          ref={bottomActionButtonRef}
        />
      )}
    </div>
  );
}

export { QuestionInformation };