import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { BottomActionButton } from "@/components/widgets/BottomActionButton/BottomActionButton";
import PrivacyTermsConsent from "@/components/widgets/PrivacyTermsConsent/PrivacyTermsConsent";
import { useDynamicSize } from "@/hooks/DOM/useDynamicSize";
import { cn } from "@/lib/utils";

export interface SoulmatePortraitProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  bottomActionButtonProps?: React.ComponentProps<typeof BottomActionButton>;
  privacyTermsConsentProps?: React.ComponentProps<typeof PrivacyTermsConsent>;
  title?: TypographyProps<"h2">;
}

export default function SoulmatePortrait({
  bottomActionButtonProps,
  privacyTermsConsentProps,
  title,
  ...props
}: SoulmatePortraitProps) {
  const {
    height: bottomActionButtonHeight,
    elementRef: bottomActionButtonRef,
  } = useDynamicSize<HTMLDivElement>({
    defaultHeight: 132,
  });

  return (
    <div
      className="w-full flex flex-col items-center gap-[30px]"
      {...props}
      style={{
        paddingBottom: `${bottomActionButtonHeight}px`,
        ...props.style,
      }}
    >
      <div className="w-full pt-6 pb-3">
        {title && (
          <Typography
            as="h2"
            size="xl"
            weight="bold"
            {...title}
            className={cn(title.className, "leading-[125%] text-primary")}
          />
        )}
      </div>
      {bottomActionButtonProps && (
        <BottomActionButton
          {...bottomActionButtonProps}
          className={cn(
            "max-w-[560px] z-10",
            bottomActionButtonProps.className
          )}
          ref={bottomActionButtonRef}
          childrenUnderButton={
            privacyTermsConsentProps && (
              <PrivacyTermsConsent
                {...privacyTermsConsentProps}
                className={cn(privacyTermsConsentProps.className, "mt-5")}
              />
            )
          }
        />
      )}
    </div>
  );
}