import { cn } from "@/lib/utils";
import { Button, ButtonProps } from "@/ui";
import { PlusCircleIcon } from "lucide-react";

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

export const AddNewRowButton = ({
  label = "Añade nueva fila",
  className,
  ...props
}: AddNewRowButtonProps): JSX.Element => (
  <Button
    type='button'
    variant='outline'
    size='icon'
    className={cn(
      "w-full gap-1 border-dashed text-muted-foreground border-muted-foreground/50",
      className
    )}
    {...props}
  >
    <PlusCircleIcon className={label ? "w-4 h-4 mr-2" : "w-4 h-4"} />
    {label && <>{label}</>}
  </Button>
);

AddNewRowButton.displayName = "AddNewRowButton";