interface ExtractButtonProps {
  loading: boolean;
  onExtract: () => void;
  mode: 'auto' | 'selection';
  onModeChange: (mode: 'auto' | 'selection') => void;
}

export function ExtractButton({ loading, onExtract, mode, onModeChange }: ExtractButtonProps) {
  return (
    <div className="space-y-3">
      {/* 提取模式切换 */}
      <div className="flex gap-1 p-1 bg-gray-100 dark:bg-gray-800/50 rounded-lg">
        <button
          onClick={() => onModeChange('auto')}
          className={`flex-1 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
            mode === 'auto'
              ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
          }`}
        >
          自动提取
        </button>
        <button
          onClick={() => onModeChange('selection')}
          className={`flex-1 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
            mode === 'selection'
              ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
              : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
          }`}
        >
          选择区域
        </button>
      </div>

      {/* 主提取按钮 */}
      <button
        onClick={onExtract}
        disabled={loading}
        className={`w-full py-3 px-4 rounded-xl font-medium text-white transition-all duration-200 ${
          loading
            ? 'bg-gray-300 dark:bg-gray-600 cursor-not-allowed'
            : 'bg-gradient-to-r from-indigo-500 to-violet-600 hover:from-indigo-600 hover:to-violet-700 shadow-lg shadow-indigo-500/30 hover:shadow-indigo-500/40 active:scale-[0.98]'
        }`}
      >
        {loading ? (
          <span className="flex items-center justify-center gap-2">
            <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
            </svg>
            提取中...
          </span>
        ) : (
          <span className="flex items-center justify-center gap-2">
            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            提取并导出 Markdown
          </span>
        )}
      </button>
    </div>
  );
}