import React from 'react';

interface SearchFilterButtonProps {
  displayText: string;
  isActive: boolean;
  onClick: () => void;
  className?: string;
  showIcon?: boolean;
  disabled?: boolean;
}

const SearchFilterButton: React.FC<SearchFilterButtonProps> = ({
  displayText,
  isActive,
  onClick,
  className = '',
  showIcon = true,
  disabled = false
}) => {
  const baseClasses = "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500";
  
  const activeClasses = isActive
    ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-100"
    : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400";
    
  const disabledClasses = disabled
    ? "opacity-50 cursor-not-allowed"
    : "cursor-pointer";

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${baseClasses} ${activeClasses} ${disabledClasses} ${className}`}
    >
      {showIcon && (
        <svg 
          className="w-4 h-4 mr-2" 
          fill="none" 
          stroke="currentColor" 
          viewBox="0 0 24 24"
        >
          <path 
            strokeLinecap="round" 
            strokeLinejoin="round" 
            strokeWidth={2} 
            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" 
          />
        </svg>
      )}
      <span className="truncate">{displayText}</span>
      {isActive && (
        <div className="ml-2 w-2 h-2 bg-blue-500 rounded-full flex-shrink-0" />
      )}
    </button>
  );
};

export default SearchFilterButton;