import React from 'react';
import { PencilSquareIcon, XCircleIcon, EyeIcon } from '@heroicons/react/24/outline';

type ActionButtonVariant = 'edit' | 'delete' | 'view';

interface ActionButtonProps {
  variant: ActionButtonVariant;
  onClick: () => void;
  children: React.ReactNode;
  disabled?: boolean;
}

const ActionButton: React.FC<ActionButtonProps> = ({ 
  variant, 
  onClick, 
  children, 
  disabled = false 
}) => {
  const getVariantClasses = () => {
    switch (variant) {
      case 'edit':
        return 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200';
      case 'delete':
        return 'bg-red-100 text-red-800 hover:bg-red-200';
      case 'view':
        return 'bg-blue-100 text-blue-800 hover:bg-blue-200';
      default:
        return 'bg-gray-100 text-gray-800 hover:bg-gray-200';
    }
  };

  const getIcon = () => {
    switch (variant) {
      case 'edit':
        return <PencilSquareIcon className="w-4 h-4" />;
      case 'delete':
        return <XCircleIcon className="w-4 h-4" />;
      case 'view':
        return <EyeIcon className="w-4 h-4" />;
      default:
        return null;
    }
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`
        rounded-md px-2 py-1 text-xs flex items-center gap-1 
        transition-all duration-200 hover:opacity-90
        disabled:opacity-50 disabled:cursor-not-allowed
        cursor-pointer
        ${getVariantClasses()}
      `}
    >
      {getIcon()}
      {children}
    </button>
  );
};

export default ActionButton;