import { Button, ButtonProps } from "@/ui";
import { t } from "i18next";
import { PackagePlusIcon } from "lucide-react";
import { forwardRef } from "react";

export interface AppendBlockRowButtonProps extends ButtonProps {
  label?: string;
  className?: string;
}

export const AppendBlockRowButton = forwardRef<HTMLButtonElement, AppendBlockRowButtonProps>(
  (
    { label = t("common.append_block"), className, ...props }: AppendBlockRowButtonProps,
    ref
  ): JSX.Element => (
    <Button type='button' variant='outline' ref={ref} {...props}>
      {" "}
      <PackagePlusIcon className={label ? "w-4 h-4 mr-2" : "w-4 h-4"} />
      {label && <>{label}</>}
    </Button>
  )
);

AppendBlockRowButton.displayName = "AppendBlockRowButton";
