"use client";

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

interface CouponProps extends Omit<React.ComponentProps<"div">, "title"> {
  couponProps: React.ComponentProps<typeof CouponWidget>;
  bottomActionButtonProps?: BottomActionButtonProps;
}

function Coupon({
  couponProps,
  bottomActionButtonProps,
  ...props
}: CouponProps) {
  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,
      }}
    >
      {/* {title && (
        <Typography
          as="h2"
          weight="bold"
          font="manrope"
          {...title}
          className={cn(title.className, "text-[25px] leading-[38px]")}
        />
      )}
      {subtitle && (
        <Typography
          as="p"
          weight="medium"
          font="inter"
          {...subtitle}
          className={cn(subtitle.className, "text-[17px] leading-[26px]")}
        />
      )} */}
      <CouponWidget {...couponProps} />
      {bottomActionButtonProps && (
        <BottomActionButton
          {...bottomActionButtonProps}
          className={cn(
            "max-w-[560px] z-10",
            bottomActionButtonProps.className
          )}
          ref={bottomActionButtonRef}
        />
      )}
    </div>
  );
}

export { Coupon };
