"use client";

import { cn } from "@/lib/utils";
import { Header } from "@/components/layout/Header/Header";
import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";

export interface LayoutQuestionProps
  extends Omit<React.ComponentProps<"section">, "title" | "content"> {
  headerProps?: React.ComponentProps<typeof Header>;
  title?: TypographyProps<"h2">;
  subtitle?: TypographyProps<"p">;
  children: React.ReactNode;
  contentProps?: React.ComponentProps<"div">;
  childrenWrapperProps?: React.ComponentProps<"div">;
  childrenAboveTitle?: React.ReactNode; // Контент над заголовком
}

function LayoutQuestion({
  className,
  headerProps,
  title,
  subtitle,
  children,
  contentProps,
  childrenWrapperProps,
  childrenAboveTitle,
  ...props
}: LayoutQuestionProps) {
  return (
    <section
      className={cn("block min-h-dvh w-full", className)}
      {...props}
      // Безопаснее, чем JS-константа: если CSS-переменная не задана — будет 0px
      style={{
        paddingBottom: "var(--bottom-action-button-height, 0px)",
        ...(props.style ?? {}),
      }}
    >
      {headerProps && <Header {...headerProps} />}

      <div
        {...contentProps}
        className={cn(
          "w-full flex flex-col justify-center items-center p-6 pt-[30px]",
          contentProps?.className
        )}
      >
        {/* Контент над заголовком */}
        {childrenAboveTitle}

        {title && (
          <Typography
            as="h2"
            font="manrope"
            weight="bold"
            {...title}
            align={title.align ?? "left"}
            className={cn("w-full text-[25px] leading-[38px]", title.className)}
          />
        )}

        {subtitle && (
          <Typography
            as="p"
            weight="medium"
            {...subtitle}
            align={subtitle.align ?? "left"}
            className={cn(
              "w-full mt-2.5 text-[17px] leading-[26px]",
              subtitle.className
            )}
          />
        )}

        <div
          {...childrenWrapperProps}
          className={cn("w-full mt-[30px]", childrenWrapperProps?.className)}
        >
          {children}
        </div>
      </div>
    </section>
  );
}

export { LayoutQuestion };
