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

const PrimaryButton = ({ children, onClick, loading, 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-[#007E45] text-white rounded-xl text-sm font-medium hover:bg-[#007E45] focus:outline-none focus:ring-2 focus:ring-[#941403] 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;