"use client";

import { cn } from "@/lib/utils";
import { forwardRef } from "react";

import { GradientBlur } from "../GradientBlur/GradientBlur";
import { ActionButton } from "@/components/ui/ActionButton/ActionButton";

export interface BottomActionButtonProps extends React.ComponentProps<"div"> {
  actionButtonProps?: React.ComponentProps<typeof ActionButton>;
  showGradientBlur?: boolean;
}

const BottomActionButton = forwardRef<HTMLDivElement, BottomActionButtonProps>(
  function BottomActionButton(
    { actionButtonProps, showGradientBlur = true, className, ...props },
    ref
  ) {
    return (
      <div
        ref={ref}
        className={cn(
          "fixed bottom-0 left-[50%] translate-x-[-50%] w-full",
          className
        )}
        {...props}
      >
        <GradientBlur className="p-6 pt-11" isActiveBlur={showGradientBlur}>
          {actionButtonProps ? <ActionButton {...actionButtonProps} /> : null}
        </GradientBlur>
      </div>
    );
  }
);

export { BottomActionButton };