import React from "react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PrimaryButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  loading?: boolean;
  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  className?: string;
}

const PrimaryButton_v2: React.FC<PrimaryButtonProps> = ({
  children,
  onClick,
  loading = false,
  disabled,
  className,
  icon: Icon,
  ...props
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled || loading}
      className={cn(
        // "inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-[#941403] text-white rounded-xl text-sm font-medium hover:bg-[#7a1002] focus:outline-none focus:ring-2 focus:ring-[#941403] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all",
         "inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-[#007E45] text-white rounded-xl text-sm font-medium hover:bg-[#10a237] focus:outline-none focus:ring-2 focus:ring-[#00D639] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all",
        className
      )}
      {...props}
    >
      {loading ? (
        <Loader2 className="w-4 h-4 animate-spin" />
      ) : Icon ? (
        <Icon className="w-4 h-4" />
      ) : null}

      {children}
    </button>
  );
};

export default PrimaryButton_v2;
