import React from 'react';

interface IconButtonProps {
  icon: React.ReactNode;
  ariaLabel: string;
  onClick: () => void;
  variant?: 'ghost' | 'solid';
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

const IconButton: React.FC<IconButtonProps> = ({
  icon,
  ariaLabel,
  onClick,
  variant = 'ghost',
  size = 'md',
  className = '',
}) => {
  const sizeClasses = {
    sm: 'p-1 text-xs',
    md: 'p-2 text-sm',
    lg: 'p-3 text-base',
  };

  const variantClasses = {
    ghost: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100',
    solid: 'bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200',
  };

  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={ariaLabel}
      className={`
        inline-flex items-center justify-center rounded-md transition-colors 
        focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 
        dark:focus:ring-offset-slate-900
        ${sizeClasses[size]} 
        ${variantClasses[variant]} 
        ${className}
      `}
    >
      {icon}
    </button>
  );
};

export default IconButton;