import { Button } from "@repo/shadcn-ui/components";
import { PlusCircleIcon } from "lucide-react";
import { JSX, forwardRef } from "react";
import { useTranslation } from "../../i18n";

export interface AppendEmptyRowButtonProps extends React.ComponentProps<typeof Button> {
  label?: string;
  className?: string;
}

export const AppendEmptyRowButton = forwardRef<HTMLButtonElement, AppendEmptyRowButtonProps>(
  ({ label, className, ...props }: AppendEmptyRowButtonProps, ref): JSX.Element => {
    const { t } = useTranslation();
    const _label = label || t("common.append_empty_row");

    return (
      <Button type='button' variant='outline' ref={ref} {...props}>
        <PlusCircleIcon className={_label ? "w-4 h-4 mr-2" : "w-4 h-4"} />
        {_label && <>{_label}</>}
      </Button>
    );
  }
);

AppendEmptyRowButton.displayName = "AppendEmptyRowButton";
