"use client";

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

export interface BottomActionButtonProps extends React.ComponentProps<"div"> {
  actionButtonProps?: React.ComponentProps<typeof ActionButton>;
  childrenAboveButton?: React.ReactNode;
  childrenUnderButton?: React.ReactNode;
}

function BottomActionButton({
  actionButtonProps,
  className,
  childrenAboveButton,
  childrenUnderButton,
  ...props
}: BottomActionButtonProps) {
  return (
    <div
      className={cn(
        "fixed bottom-0 left-[50%] translate-x-[-50%] w-full",
        className
      )}
      {...props}
    >
      <GradientBlur className="p-6 pt-11">
        {childrenAboveButton}
        <ActionButton {...actionButtonProps} />
        {childrenUnderButton}
      </GradientBlur>
    </div>
  );
}

export { BottomActionButton };