import { cn } from "@/lib/utils";
import { Button, ButtonProps } from "@/ui";
import { cva, type VariantProps } from "class-variance-authority";
import { LucideIcon } from "lucide-react";
import React from "react";

const customButtonVariants = cva("", {
  variants: {
    size: {
      default: "w-4 h-4",
      sm: "h-3.5 w-3.5",
      lg: "h-6 w-6",
      icon: "w-7 h-7",
    },
  },
  defaultVariants: {
    size: "default",
  },
});

export interface CustomButtonProps extends ButtonProps, VariantProps<typeof customButtonVariants> {
  icon?: LucideIcon; // Propiedad para proporcionar el icono personalizado
  label?: string;
}

const CustomButton = React.forwardRef<HTMLButtonElement, CustomButtonProps>(
  ({ className, label, size, icon: Icon, children, ...props }, ref) => {
    const hasIcon = !!Icon;

    return (
      <Button ref={ref} size={size} className={cn(hasIcon ? "gap-1" : "", className)} {...props}>
        {hasIcon && <Icon className={cn(customButtonVariants({ size }))} />}
        <>{label ? label : children}</>
      </Button>
    );
  }
);

CustomButton.displayName = "CustomButton";

export { CustomButton, customButtonVariants };
