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

interface ActionButtonProps {
  icon: LucideIcon;
  label: string;
  onClick?: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
  className?: string;
  title?: string;
}

export const ActionButton: React.FC<ActionButtonProps> = ({ 
  icon: Icon, 
  label, 
  onClick, 
  variant = 'secondary', 
  disabled = false, 
  className,
  title 
}) => (
  <button
    onClick={onClick}
    disabled={disabled}
    title={title || label}
    className={cn(
      "flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all shadow-sm active:scale-95",
      variant === 'primary' 
        ? "bg-[#941403] text-white hover:bg-[#7a1002] shadow-red-900/10" 
        : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750",
      disabled && "opacity-50 cursor-not-allowed grayscale",
      className
    )}
  >
    <Icon className="w-4 h-4" />
    <span className="hidden sm:inline">{label}</span>
  </button>
);
