import { Loader2 } from 'lucide-react';

/**
 * GlassButton 组件
 * 毛玻璃按钮样式，支持多种变体和加载状态
 * @param {Object} props
 * @param {React.ReactNode} props.children - 子元素
 * @param {Function} props.onClick - 点击事件处理函数
 * @param {'default'|'primary'|'icon'} props.variant - 按钮变体
 * @param {boolean} props.disabled - 是否禁用
 * @param {boolean} props.loading - 是否显示加载状态
 * @param {string} props.className - 额外的CSS类名
 * @param {string} props.type - 按钮类型
 */
const GlassButton = ({ 
  children, 
  onClick, 
  variant = 'default',
  disabled = false,
  loading = false,
  className = '',
  type = 'button'
}) => {
  // 变体样式映射
  const variantMap = {
    default: 'px-6 py-3 rounded-2xl text-white/70',
    primary: 'px-8 py-4 rounded-2xl bg-orange-200/5 text-orange-200 font-bold tracking-[0.2em] border-orange-200/20 shadow-lg shadow-orange-900/10',
    icon: 'p-2.5 rounded-full'
  };

  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled || loading}
      className={`
        glass-btn
        ${variantMap[variant]}
        ${className}
      `}
    >
      {loading ? (
        <>
          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
          <span className="animate-pulse">处理中...</span>
        </>
      ) : (
        children
      )}
    </button>
  );
};

export default GlassButton;
