"use client";

import { cn } from "@/lib/utils";
import { Header } from "@/components/layout/Header/Header";
import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import {
  BottomActionButton,
  BottomActionButtonProps,
} from "@/components/widgets/BottomActionButton/BottomActionButton";
import { useEffect, useRef, useState } from "react";

export interface LayoutQuestionProps
  extends Omit<React.ComponentProps<"section">, "title" | "content"> {
  headerProps?: React.ComponentProps<typeof Header>;
  title: TypographyProps<"h2">;
  subtitle: TypographyProps<"p">;
  children: React.ReactNode;
  bottomActionButtonProps?: BottomActionButtonProps;
}

function LayoutQuestion({
  className,
  headerProps,
  title,
  subtitle,
  children,
  bottomActionButtonProps,
  ...props
}: LayoutQuestionProps) {
  const bottomActionButtonRef = useRef<HTMLDivElement | null>(null);
  const [bottomActionButtonHeight, setBottomActionButtonHeight] =
    useState<number>(132);

  useEffect(() => {
    if (bottomActionButtonRef.current) {
      console.log(bottomActionButtonRef.current.clientHeight);

      setBottomActionButtonHeight(bottomActionButtonRef.current.clientHeight);
    }
  }, [bottomActionButtonProps]);

  return (
    <section
      className={cn(`block min-h-dvh w-full`, className)}
      {...props}
      style={{
        paddingBottom: `${bottomActionButtonHeight}px`,
        ...props.style,
      }}
    >
      <Header {...headerProps} />
      <div className="w-full flex flex-col justify-center items-center p-6 pt-[30px]">
        {title && (
          <Typography
            as="h2"
            font="manrope"
            weight="bold"
            align="left"
            {...title}
            className={cn(title.className, "text-[25px] leading-[38px]")}
          />
        )}
        {subtitle && (
          <Typography
            as="p"
            weight="medium"
            align="left"
            {...subtitle}
            className={cn(
              subtitle.className,
              "w-full mt-2.5 text-[17px] leading-[26px]"
            )}
          />
        )}
        {children}
        {bottomActionButtonProps && (
          <BottomActionButton
            {...bottomActionButtonProps}
            className="max-w-[560px]"
            ref={bottomActionButtonRef}
          />
        )}
      </div>
    </section>
  );
}

export { LayoutQuestion };